I'm using Chart.js to generate some charts. The line chart requires labels. I can't seem to figure out a way to change the color of those labels.

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
        labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
        datasets : [
            {
                fillColor : chartGood,
                strokeColor : "rgba(255,255,255,1)",
                pointColor : "rgba(50,182,93,1)",
                pointStrokeColor : "#fff",
                data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
            }
        ]
    }

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);

I've tried:

labelColor : "#fff",

legend : {
    font : {
        color : "#fff"
    }
}

label : {
    font : {
        color : "#fff"
    }
}

And a few other combinations but nothing seems to work. I thought I found what I was looking for in the docs

//String - Scale label font colour  
    scaleFontColor : "#fff",

but that didn't solve my issue either.

I'm using Chart.js to generate some charts. The line chart requires labels. I can't seem to figure out a way to change the color of those labels.

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
        labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
        datasets : [
            {
                fillColor : chartGood,
                strokeColor : "rgba(255,255,255,1)",
                pointColor : "rgba(50,182,93,1)",
                pointStrokeColor : "#fff",
                data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
            }
        ]
    }

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);

I've tried:

labelColor : "#fff",

legend : {
    font : {
        color : "#fff"
    }
}

label : {
    font : {
        color : "#fff"
    }
}

And a few other combinations but nothing seems to work. I thought I found what I was looking for in the docs

//String - Scale label font colour  
    scaleFontColor : "#fff",

but that didn't solve my issue either.

• javascript
• charts
• linechart

2 Answers 2

Yes, the scaleFontColor option changes the color of labels.

You probably tried to add it to the data object, that's why it didn't work. Actually it should be passed as a second parameter of the Line function like this:

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d"))
    .Line(lineChartData, { scaleFontColor: "#ff0000" });

Edit:

Similarly, to change the font size use scaleFontSize.

Example:

scaleFontSize: 16

-- 2024 -- the new way

{ 
 options: {
    plugins: {
      legend: {
        labels: {
          color: "white",
        },
      },
    },
  },
}