Search code examples
chart.jschart.js2

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


I have the following chart and would like to manually set the Y axis labels. Instead of using 1,2,3,4,5, I want One, Two, Three, Four, Five.
Is there a way to do this? Here's my options structure:

    options = {
      scales: {
        yAxes: [{
          scaleLabel: { labelString: ["One", "Two", "Three", "Four", "Five"] },
          ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
          gridLines: {display: false}
        }]
       },
     };

enter image description here


Solution

  • 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';
            }
        }
    }