How to change X-Axis Interval on Chart.js

17,186

Solution 1

It can be done using the maxTicksLimit option of xAxes, see this working fiddle -> http://jsfiddle.net/Lzo5g01n/3/

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Solution 2

For Chart.js 3.3.2, you can use @Kunal Khivensara's approach with a few changes. You can check the documentation. Put ticks in xAxis in scales. Example:

...
options: {
    scales: {
        xAxis: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}
...
Share:
17,186
kashmoney
Author by

kashmoney

Updated on July 02, 2022

Comments

  • kashmoney
    kashmoney over 1 year

    I have a line graph on Chart.js and am trying to edit the intervals on the x-axis and the y-axis.

    My y-axis intervals are functioning as expected, but my x-axis intervals are not.

    I tried the following code

    let myChart = new Chart(inputChart, {
        type: 'line',
        data: {
              labels: [1,2,....,360] // list of values from python script
              data: [360 random numbers here] 
        }
        options: {
            scales: {
                yAxes: [{
                    id:'main-axis',
                    ticks: {
                         stepSize: 40 // this worked as expected
                            }
                       }],
                xAxes: [{
                    id: 'main-x-axis',
                    ticks: {
                        stepSize: 30 // this did not work as expected
                    }
                }]
            }
        }
    })
    

    With 360 datapoints, I just want to basically see 12 intervals (in increments of 30), but I am seeing 90 intervals in increments of 4 instead. Am I just using the wrong property for stepSize? If so what is the correct property?