Set minimum step size in chart js
ticks: {
precision: 0
}
This worked equally well as the callback function above and is much cleaner.
precision, if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
If you don't want to show point value (e.g. 0.5) labels you could write a callback function to filter the point value labels instead of using stepSize.
Like this:
ticks: {
min: 0, // it is for ignoring negative step.
beginAtZero: true,
callback: function(value, index, values) {
if (Math.floor(value) === value) {
return value;
}
}
}
Working fiddle here: https://jsfiddle.net/ma7h611L/
Update:
As noted by Atta H. and Lekoaf below, Chart.js added the precision property to ticks. It is available since version 2.7.3. See Lekoaf's answer how to use this.