CODEWITHSUNDEEP
javascriptchart.js
Berne
Berne

Reputation: 627

How to make integer scale in Chartjs

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.

Upvotes: 17

Views: 15882

Answers (2)

NiklasPor
NiklasPor

Reputation: 9755

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

Upvotes: 4

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 21

Related Questions