CODEWITHSUNDEEP
javascriptchartschart.js
Liz
Liz

Reputation: 1048

Charts.js - Colors for stacked bar on multi-series line/bar chart are not working

I am trying to implement different colors for each dataset in a multi-series stacked bar chart/line chart I am creating. However, it does not seem that the colors are working properly for my stacked bar chart.

Here is a screenshot of this issue: issue with stacked bar chart colors not working properly

As you can see, the colors I have defined are only being pulled through for the first bar, and the other bars are still grey. How can I fix this?

Here is a JS Bin of my chart.

Upvotes: 1

Views: 797

Answers (1)

Sergiu
Sergiu

Reputation: 1206

Here it is:

https://jsbin.com/sijowuruda/edit?html,js,output

The issue is that these colors:

backgroundColor: ['rgba(71, 86, 119, 0.2)'],
borderColor: ['rgba(71, 86, 119, .8)']

need to be strings not arrays

backgroundColor: 'rgba(71, 86, 119, 0.2)',
borderColor: 'rgba(71, 86, 119, .8)'

Otherwise, there the chart lib will read one color for each column / per data type, and since you have a single color in your array, only the first column has a corresponding color for each data type.

Upvotes: 2

Related Questions