12

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ryan Rich
  • 11,637
  • 8
  • 22
  • 31

1 Answers1

16

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
Linga
  • 10,379
  • 10
  • 52
  • 104
vortexwolf
  • 13,967
  • 2
  • 54
  • 72
  • This doesn't seem to work for the radar chart type :-( – izak Jul 27 '15 at 09:26
  • @izak They should have some similar property, try to test some of them from documentation. Maybe "pointLabelFontColor" is what you need for Radar charts. – vortexwolf Aug 05 '15 at 07:28
  • Indeed, the property I was looking for is pointLabelFontColor. I then had the additional problem that the scale was at the bottom, and if you fill the radar chart with a colour it might completely disappear. To get the scale on top I eventually had to dive into the code and move the drawing of the scale to be last :-) – izak Aug 06 '15 at 07:06
  • 1
    Does not work with Chart.js 2.1.3 Line Chart with Time Scales. – Mulgard Jun 30 '16 at 10:50
  • @Mulgard In the updated version I can't find point labels at all, I see points but no text. Maybe they were moved to tooltips? If so, then you can edit titleFontColor of tooltips options. – vortexwolf Jul 22 '16 at 23:33
  • What about Chartjs for Angularjs? – Mohammad Kermani Feb 27 '17 at 10:22