How to make integer scale in Chartjs

Question

I'm trying to make a horizontal bar chart with an integer scale. As suggested in this question, I've tried to set scaleOverride, scaleSteps etc, but it seems not to be working. I tried to put them in dataset, in options, in xScales but nothing worked.

This jsfiddle shows what I tried to do.

Lifeless

Answer 1

The linked question is for Chart.js version 1.x. For the new version you need to use the ticks option. See http://www.chartjs.org/docs/#scales

   ...
   xAxes: [{
      ticks: {
        min: 0,
        stepSize: 1,
        max: 4
      },
      ...

---

Fiddle - https://jsfiddle.net/jkufz1b9/

Petr

Can you please refer to the version 1.x 's documentation as well. – Bureaucracy

The new documentation version: chartjs.org/docs/latest/axes/cartesian/… (search for "stepSize" to find all the occurrences, if you are looking for another chart type) – Spineless

Answer 2

For anyone coming across this nowadays (ChartJS 4+), if you want to keep the automatic stepSize and not define it statically, you can simply use the precision option on the ticks to define to how many decimal places the ticks will be rounded. Use 0 for an integer scale:

scales: {
  y: {
    ticks: { precision: 0 },
  },
}

Linear Axis Tick Options

Rudolf