score:52

Accepted answer

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
});

score:6

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
                    }
                }
            }
        }

score: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
});

score: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,

score:39

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
            }
        }]
    }
}

score:56

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
        }
      }]
    }
  }
});

score:150

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;}}
        }
      }]
    }
  }
});

Related Query

More Query from same tag