Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 652
gitb Avatar asked Jun 08 '16 16:06

gitb


People also ask

How do I edit a chart label?

In the worksheet, click the cell that contains the title or data label text that you want to change. Edit the existing contents, or type the new text or value, and then press ENTER. The changes you made automatically appear on the chart.

How do I add a label to the y-axis?

Click the chart, and then click the Chart Layout tab. Under Labels, click Axis Titles, point to the axis that you want to add titles to, and then click the option that you want. Select the text in the Axis Title box, and then type an axis title.

How do you change the color of labels in ChartJS?

With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks. color and scales.


1 Answers

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.

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';
        }
    }
}
like image 80
Quince Avatar answered Sep 22 '22 14:09

Quince