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.

Tags:

Graph

Chart.Js