[Chartjs]-How to set default colour for bars in Chart.js

by

18👍

✅

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)", // v2+ uses background color
    strokeColor: "brown",
    borderWidth: 1
}]

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

1👍

On the latest version, I used backgroundColor instead of fillColor

1👍

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,

0👍

Here is the answer from Chart.js documentation:

If you don’t have any preference for colors, you can use the built-in Colors plugin. It will cycle through a palette of seven Chart.js brand colors. All you need is to import and register the plugin:

import { Colors } from 'chart.js';
Chart.register(Colors);

Leave a comment