Skip decimal points on y-axis in chartJS
I am using this library to draw charts in my web app. The issue is that I am having decimal points in my y-axis. You can see that in the image below
Is there a way that I can restrict it to only have numbers?
This is my code
var matches = $("#matches").get(0).getContext("2d");
var data = {
labels: labelsFromCurrentDateTillLastWeek,
datasets: [
{
label: "Last Weeks Matches",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: result
}
]
};
var options = {
scaleLabel: function (label) {
return Math.round(label.value);
}
};
var myLineChart = new Chart(matches, {
type: 'bar',
data: data,
options: options
})
Update: please see an updated answer from @DreamTeK
that shows how this can now be done as part of the chartjs api https://stackoverflow.com/a/54006487/2737978
in chartjs 2.x you can pass an option for a userCallback
to the yaxis tick field. In this you can check if the label is a whole number
here is an example
options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
},
}
fiddle example
2019 Update
This can now easily be achieved using the precision
option:
ticks: {
precision:0
}
As per the documentation.
If defined and stepSize is not specified, the step size will be rounded to this many decimal places.
EXAMPLE
options: {
scale: {
ticks: {
precision: 0
}
}
}
OR (Single Axis)
options: {
scales: {
xAxes: [{
ticks: {
precision: 0
}
}]
}
}
Another alternative is to use the fixedStepSize option as follows:
options = {
scales: {
yAxes: [{
ticks: {
fixedStepSize: 1
}
}],
},
};
by the latest version this option changed to
scales: {
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero: true,
},
}],
},