Liz Banach Liz Banach - 2 months ago 28
Javascript Question

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.

Answer

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.