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.
With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks.
Right-click on one label to open the Annotation dialog. In this dialog, you can use the Font Color option to customize the color for current label. If the color has been set to Auto, it means the color of current label will follow the Font Color setting in the the Labels tab of Plot Details dialog.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With