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.
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