How to change bar fillColor in chart.js bar char

Question

I use chart.js to draw a bar chart. How to change the bar fill color in chart.js.(I use the 'Bar chart' )

    var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

What's the fillColor : "rgba(220, 220, 220, 0.5) mean? How can I change this color?

Answer 1

rgba stands for red green blue alpha. The parameters are as follows:

rgba(x, y, z, w)

• x: amount of red (0-255)
• y: amount of green (0-255)
• z: amount of blue (0-255)
• w: alpha value (opacity). 1 is fully opaque, 0 is fully transparent

You can also specify Hex values as colours:

{
    fillColor : "#ffff00",
    strokeColor : "#000000",
    data : [65,59,90,81,56,55,40]
}

or predefined colour names instead if you don't want to use rgba values:

{
    fillColor : "yellow",
    strokeColor : "black",
    data : [65,59,90,81,56,55,40]
}