Change label font color for a line chart using Chart.js

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.

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.