Differently displayed colors on chart.js

Question

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

<column-chart
  :data="votesData"
  height="200px"
  :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"
>
</column-chart>
<bar-chart
  :data="chartData"
  suffix="%"
  height="100px"
  :colors="['#28a745', '#007bff', '#ffc107', '#dc3545']"
  :stacked="true"
  :library="{ options: { tooltips: false } }"
>

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:

<column-chart :data="chartData" :colors="['#007bff', '#28a745']" height="200px">

Answer 1

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

<template>
  <div class="hello">
    <column-chart :data="votesData" height="200px" :colors="[colors]">
    </column-chart>
    <bar-chart
      :data="chartData"
      suffix="%"
      height="100px"
      :colors="colors"
      :stacked="true"
      :library="{ options: { tooltips: false } }"
    >
    </bar-chart>
    <line-chart :data="data" :colors="colors" />
    <bar-chart
      :colors="colors"
      :data="booksData"
      suffix="%"
      height="200px"
      :stacked="true"
    ></bar-chart>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      colors: ["#28a745ff", "#007bffff", "#ffc107ff", "#dc3545ff"],
    };
  },
};
</script>