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

Robert Christopher
  • 4,940
  • 1
  • 20
  • 21
gitb
  • 1,090
  • 2
  • 12
  • 20

1 Answers1

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';
        }
    }
}
Quince
  • 14,790
  • 6
  • 60
  • 69
  • Thank you very much for this solution. – kk. Dec 29 '16 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 – monikapatelIT Feb 28 '18 at 02:49
  • Says `Invalid scale configuration for scale: yAxes` for me – Oscar Chambers Apr 27 '22 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 https://jsfiddle.net/nwr8pa6s/, the axis are now objects rather than arrays – Quince Apr 28 '22 at 13:36