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
}
}
}
}
...
Author by
kashmoney
Updated on July 02, 2022Comments
-
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?