Chart.js Yaxes Ticks Stepsize Not Working (fiddle)

I have created a line chart with these options for the yAxis: yAxes: [{ ticks: { precision: 1, stepSize: 18.1, min: 148.5, max: 220.9 } }]

Solution 1:

This question was asked at least twice (1, 2).

The solution is to use min and max values so that stepSize is a factor of max - min, allowing the chart to actually use the specified stepSize:

yAxes: [{
  ticks: {
    maxTicksLimit:5,
    min:144.8, //18.1*8max:235.3, //18.1*13stepSize:18.1,
  },
}]

---

An alternative would be using suggestedMin and suggestedMax rather than min and max, which allows Chart.js to calculate its own min and max:

In your case, you just need to apply:

yAxes: [{
  ticks: {
    maxTicksLimit:5,
    suggestedMin:148.5,
    suggestedMax:220.9,
    stepSize:18.1,
  },
}]