17

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

1 Answer 1

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';
        }
    }
}
4
  • Thank you very much for this solution.
    – kk.
    Dec 29, 2016 at 17:29
  • Thank you very much @quince after spending a couple of hours researching on it. I finally resolved it. you are star :) thanks +1 Feb 28, 2018 at 2:49
  • Says Invalid scale configuration for scale: yAxes for me Apr 27, 2022 at 12:18
  • 1
    @OscarChambers you are prob using V3.x of chartjs, the code above was valid for 2.x, take a look at this updated fiddle jsfiddle.net/nwr8pa6s, the axis are now objects rather than arrays
    – Quince
    Apr 28, 2022 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.