How to set default colour for bars in Chart.js

You need to use fillColor property in your datasets array like this - (and instead of borderColor, try strokeColor like below)

datasets: [{
    label: label,
    data: data,
    fillColor: "rgba(14,72,100,1)", //version >2 useus background color
    strokeColor: "brown",
    borderWidth: 1
}]

A full working example can be seen from one of the demos of chartjs here


You have used an array of colors. Chart.js can use that, but will then use a color per bar. If you want to have all bars in the same color, don't use an array, but a single value. Like this:

backgroundColor: "#33AEEF",

If you want each bar to have a different color, use the array instead, like this:

backgroundColor: ["#FF0000", "#00FF00", "#0000FF", "#33AEEF"],

I've also set the border to 0, but that's a personal preference, like this:

borderWidth: 0,


On the latest version, I used backgroundColor instead of fillColor