Differently displayed colors on chart.js

Question

I pass the same colors to chart.js via Chartkick-vue but they are displayed differently. Why?

Update: There is a difference in how colors are passed. The first example is an array of colors, the second example is the array of array of colors. The second is weird but it comes from this answer https://stackoverflow.com/a/61139231/1639556. I have another chart which has the same symptoms:

LeeLenalee · Accepted Answer

A solution is to instead of giving the RGB HEX values pass the RGBA HEX values into the color prop. If you do this you can see that no matter which gradiant you choose both charts show the same color and gradiant so the colors will be identical. For ease of use I putted the colors in a seperate variable in this example: https://codesandbox.io/s/immutable-worker-3qxgj

blackSheep · Answer

since bar charts in charts.js have borderColor and backgroundColor you can customize them in your dataset property to get the same result as column charts too, I'm talking about writing sth like this:
    let chartData = {labels: ['Neni problem','Branalita', 'Vadi me to', 'Vas...'], datasets: [
        {
          backgroundColor: 'rgba(40, 167, 69, 1)',
          borderWidth: 0,
          data: 40
        }
         ,
         ...
        }];

<bar-chart
  :data="chartData"
  suffix="%"
  height="100px"
  :stacked="true"
  :library="{ options: { tooltips: false } }"
>

and because you don't want it to have border colors and want it to only have a solid background color, in dataset options I suggest you set borderWidth to 0 for every bar and to use equivalent RGBA of your hex colors with alpha 1

axelrafn · Answer

The documentation shows that there are both background and outline colors to be set, you are only giving one color so it assumes you mean the outline of the bars. It will use that color for outlines and then a faded out version (lighter) of the same color as the background color of the bars.
Try either using both background and outline colors, or simply remove the outline and parse one color for each bar after that.

Differently displayed colors on chart.js

3 Answers

Add your own answers!

Ask a Question