Set backgroundColor of bar-char (chart.js)

0
votes

I am working in Angluar with the chart.js library (https://www.chartjs.org/docs/latest/charts/bar.html) and I would like to set 3 Colors for the whole bar-Chart.

Is there a way to tell the chart that the color array should apply from the beginning, when more than 3 columns are displayed? My Code so far:

colors: ['red','green','yellow']

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
        backgroundColor: colors,
    }]
};

Output should be: red, green,yellow, red, green, yellow,...

1
angularcolorschart.js

1 Answers

0
votes

You can use simple programming logic. colorIndex = columnNumber%3 use modulus operator. Rest you can think. Hope it helps