Skip to content
Advertisement

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 enter image description here

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

    })

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

 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

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement