7

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?

kashmoney
  • 412
  • 1
  • 5
  • 17
  • 1
    xAxis values don't get calculated automatically, whatever value we supply in `labels` property in plotted there. Just supply the value you want to see in the xAxis, there is no option for stepSize. – Kunal Khivensara Nov 29 '18 at 04:17
  • 1
    I tried this, when I supply the 12 labels, I get only 12 datapoints, and lose the other 348 datapoints. Is there not a better way of handling this? – kashmoney Nov 29 '18 at 13:45

2 Answers2

17

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
    }
}]
Kunal Khivensara
  • 1,619
  • 14
  • 21
4

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
            }
        }
    }
}
...
busterroni
  • 591
  • 8
  • 17