[Chartjs]-Changing the Y axis unit in Chartjs

by

6👍

✅

With a simple hand-made function :

function minutesToHours(minutes) {
    var hour = Math.floor(minutes / 60);
    minutes = minutes % 60;
    return ((hour < 10) ? "0"+hour : hour) + ":" + ((minutes < 10) ? "0"+minutes : minutes);
}

You can then use the userCallback property of the yAxes ticks like this :

options: {
    scales: {
        yAxes: [{
            ticks: {
                userCallback: function(item) {
                    return minutesToHours(item);
                },
            }
        }]
    }
}

You can see a working example on this fiddle, and here is its result :

enter image description here

1👍

According to official documentation, creating custom tick formats, just simply use a callback function.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        }
    }
});

Leave a comment