Cant To CHange Chart.js Legend

Question

I can't change the legend color using charts.js .

This is my code so far:

label: "My First dataset",
color: "#fff",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#FFF",
scaleFontColor: "#fff",
tooltipTitleFontColor: "#fff",
tooltipFontColor: "#fff",
scaleGridLineColor : "#fff",
data: [65, 59, 80, 81, 56, 55, 40]

The color is near #666 but I want #fff.

Answer 1

Add the correct values to the rgba() - is it the fillColor you want to amend? if so then change this line to read fillColor: 'rgba(255, 255, 255, 1)', . RGBA standing for Red, Green, Blue and Alpha (opacity) - ranges from 0 - 255 for r, g and b, 0 - 1 for alpha

Answer 2

The grey ("near #666") could be due to the rgba values given (grey), but also sounds like the default color used if no colors are given. The legend color defaults to match the line and fill colors for the chart.

data:{
        datasets:[
            {
             strokeColor: "#fff",         //color of line and outline of legend
             fillColor: "#fff",     //color of fill and fill of legend
             data: []
             }
        ]
    },

If you are using chart.js2, strokeColor and fillColor have been replaced with borderColor and backgroundColor respectively:

data:{
    datasets:[
        {
         borderColor: "#fff",         //color of line and outline of legend
         backgroundColor: "#fff",     //color of fill and fill of legend
         data: []
         }
    ]
},