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