[Chartjs]-How do I customize y-axis labels on a Chart.js line chart?

60👍

In the ticks object you can pass a callback that will be given the label it is about to show. From here you just return a string you wish to display in place of the label.

chart.js-V2.X fiddle exampe
chart.js-V3.X fiddle exampe

ticks: {
    min: 0,
    max: 5,
    stepSize: 1,
    suggestedMin: 0.5,
    suggestedMax: 5.5,
    callback: function(label, index, labels) {
        switch (label) {
            case 0:
                return 'ZERO';
            case 1:
                return 'ONE';
            case 2:
                return 'TWO';
            case 3:
                return 'THREE';
            case 4:
                return 'FOUR';
            case 5:
                return 'FIVE';
        }
    }
}

Leave a comment