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
JavaScript
x
31
31
1
var matches = $("#matches").get(0).getContext("2d");
2
3
var data = {
4
labels: labelsFromCurrentDateTillLastWeek,
5
datasets: [
6
{
7
label: "Last Weeks Matches",
8
fillColor: "rgba(220,220,220,0.2)",
9
strokeColor: "rgba(220,220,220,1)",
10
pointColor: "rgba(220,220,220,1)",
11
pointStrokeColor: "#fff",
12
pointHighlightFill: "#fff",
13
pointHighlightStroke: "rgba(220,220,220,1)",
14
data: result
15
}
16
]
17
};
18
19
var options = {
20
scaleLabel: function (label) {
21
return Math.round(label.value);
22
}
23
};
24
25
var myLineChart = new Chart(matches, {
26
type: 'bar',
27
data: data,
28
options: options
29
30
})
31
Advertisement
Answer
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
JavaScript
1
17
17
1
options = {
2
scales: {
3
yAxes: [{
4
ticks: {
5
beginAtZero: true,
6
userCallback: function(label, index, labels) {
7
// when the floored value is the same as the value we have a whole number
8
if (Math.floor(label) === label) {
9
return label;
10
}
11
12
},
13
}
14
}],
15
},
16
}
17