Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing x axis labels in Chart.js line chart

Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes. For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]

like image 459
Natalia Avatar asked Mar 31 '14 10:03

Natalia


People also ask

How do you change chart labels?

On the Layout tab, in the Labels group, click Data Labels, and then click the option that you want. For additional data label options, click More Data Label Options, click Label Options if it's not selected, and then select the options that you want.

How do you modify the labels of the horizontal category axis?

Right-click the category labels you want to change, and click Select Data. In the Horizontal (Category) Axis Labels box, click Edit. In the Axis label range box, enter the labels you want to use, separated by commas.


1 Answers

With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.

The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.

For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:

    if (ix % 10 == 0) {
        labels[ix]="Label";
    } else {
        labels[ix]="";
    }
like image 59
MazarD Avatar answered Sep 29 '22 22:09

MazarD