CODEWITHSUNDEEP
javascriptchartschart.js
user11467329
user11467329

Reputation:

How to offset x and y axis grid points and labels using chart.js?

I want my line graph to look like this: https://ibb.co/F3c5QBt

This is my JS code:

let traffic=document.getElementById('web-traffic').getContext('2d');
var myLineChart = new Chart(traffic, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3','4-10','11-17','18-24','25-31'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(226,227,247, 0.6)',
            borderColor: 'purple',
            data: [600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000, 1500]
        }]
    },

    // Configuration options go here
    options: {
        layout: {
            padding: {
                right: 300
            }
        },
        scales: {
            gridLines: {
                offsetGridLines: true
            },
            yAxes: [{
                ticks: {
                    min: 500,
                    max: 2500,
                    stepSize: 500
                }
            }], 
            xAxes: [{
                ticks: {
                    // labelOffset: 50
                }
            }]
        }
    }
});

I tried setting the x and y-axis offset values but found it to be a sloppy solution. I then tried setting offsetGridLines to true, but that seemed to have no effect.

Does the number of data points and labels matter?

How do I achieve the desired look of the labels and grid lines in the photo above?

Thanks

Upvotes: 1

Views: 1766

Answers (1)

Ben McCann
Ben McCann

Reputation: 18994

That chart has some data points on the grid lines and some between. You can't do that in Chart.js. Only one or the other which can be controlled using offsetGridLines

Upvotes: 0

Related Questions