[Chartjs]-How to change text colour of specific labels of axis in Chart JS?

0👍

You can set the tick color as stated in the docs:

new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                }
            }]
        }
    }
});

See https://www.chartjs.org/docs/latest/general/colors.html to see what formats you can define colors in.

EDIT: I now see that you wanted to set colors for specific labels. As far as I can find, there’s no way to do that.

0👍

As far as I know this is not possible (at least for now, version 2.9, maybe in upcoming releases).

ticks.fontColor is neither scriptable nor indexable.

One thing you could do is coloring the gridlines above the ticks.

scales: {
  xAxes: [{
    gridLines: {
      color: ['#F00', '#0F0', '#F00', '#F00']
    }]
  }
}

You can hard-code the colors or use a function to give every grid line a color.

-1👍

There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global. The global font settings only apply when more specific options are not included in the config.

For example, in this chart the text will all be red except for the labels in the legend.

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});

Leave a comment