Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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); 
like image 991
Rachid O Avatar asked Apr 01 '13 20:04

Rachid O


2 Answers

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;}}         }       }]     }   } }); 
like image 78
Saeid Avatar answered Oct 12 '22 22:10

Saeid


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         }       }]     }   } }); 
like image 23
DBS Avatar answered Oct 12 '22 23:10

DBS