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

Rachid O picture Rachid O · Apr 1, 2013 · Viewed 58.7k times · Source

I have a chart that I want to include in my website using Chart.js. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?

Here's a picture of what I have now:

current chart with real numbers

And this is the code:

var lineChartData = {

    labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],

    datasets : [
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : ["0", "2","1", "0", "1","0","1"]
        }
    ]

}

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

Answer

Saeed picture Saeed · Aug 14, 2016

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