CODEWITHSUNDEEP
javascriptcsschart.js
Ramanan
Ramanan

Reputation: 63

chart js - Apply different color for each x-axes label

I have a chart built using Chart Js. Need to apply different color for each label rather than applying same color for all labels. Is there a way to do it in ticks call back function. ?

    scales: {
        xAxes: [{ 
            gridLines: {
                display: false,
            },
            ticks: {
            callback: function(label, index, labels) {
                  if ('Feb 9, 2016' === label) {
                  fontColor: "red"; // Something like this
                   return label+'f';
                } else {
                    return label;
                }
                },
             // fontColor: "red", // this here
            },
        }],
        yAxes: [{
            display: false,
            gridLines: {
                display: false,
            },
        }],
    }

Upvotes: 4

Views: 4630

Answers (1)

OST
OST

Reputation: 368

take a look at this issue, you can't currently do it without changing Chart.js source code (easy fix though)

Upvotes: 4

Related Questions