[Chartjs]-Change the Y-axis values from real numbers to integers in Chart.js

by

52👍

✅

Try this, where max is the highest value of your data.

var steps = 3;
new Chart(ctx).Bar(plotData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0
});

161👍

I handled it this way in new version:

new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}}
        }
      }]
    }
  }
});

60👍

I wasn’t able to get the existing answers to work for me when using the new version 2 of Chart.js, so here’s what I found to solve this problem in V2:

new Chart(ctx, {type: 'bar', data: barChartData,
  options:{ 
    scales: {
      yAxes: [{
        ticks: {
          stepSize: 1
        }
      }]
    }
  }
});

50👍

I know this is an old question now, but in the current version (v2.9.3) you can just set the precision of the y-axis ticks to zero to get integers:

options: {  
    scales: {
        yAxes: [{
            ticks: {
                precision: 0
            }
        }]
    }
}

18👍

As Ben Bloodworth above mentioned, the easier way is adding in options (precision: 0).

Currently working fine in version 3.7.1

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

9👍

Check the Chart.js documentation, in the Global configuration section:

// Boolean – Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,

7👍

If you like to start in a different number than zero, you have to take that into account:

var step  = 5;
var max   = 90
var start = 40;
new Chart(income).Bar(barData, {
    scaleOverride: true,
    scaleSteps: Math.ceil((max-start)/step),
    scaleStepWidth: step,
    scaleStartValue: start
});

1👍

Something to note,
There are different versions of Chart.js, and they have different options object. In versions 3 and above, the x and y axis is an object whereas, in versions less than 3, they are defined as an array.
Example,
For version 3 and above,

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

For version 3 and below,

options: {  
    scales: {
        yAxes: [{
            ticks: {
                precision: 0
            }
        }]
    }
}

Also, note that the y and x becomes yAxes and xAxex respectively.

Leave a comment