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">

LeeLenalee · Accepted Answer · 2020-11-15T11:08:01.830

3

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>

edited Nov 15 '20 at 11:08

answered Nov 15 '20 at 10:56

LeeLenalee

27,463
6
45
69

Lee, I am curious if this trouble comes from chartjs or wrapper? https://github.com/literakl/mezinamiridici/issues/101 You can see it in the code sandbox. – Leos Literak Nov 15 '20 at 11:39
It comes from the wrapper, I use the library itself in a project and manually had to add the alpha to make it transparent. You can see this example I once made for an issue that I only pass the RGB hex and it shows full collor: https://codepen.io/leelenaleee/pen/VwjgNGw. Also if you look at the source code for the examples Chart.js provides you see that they add the transparency themselfs because the default is that it shows the normal full collor. – LeeLenalee Nov 15 '20 at 12:11
The only time Chart.js shows a transparent background color for bar charts is when you dont specify a background color, then it will default all bars to a transparent gray background – LeeLenalee Nov 15 '20 at 12:19
I meant a problem with a grey popup cut in half. https://user-images.githubusercontent.com/6383287/98865108-34bf8780-246b-11eb-9127-1a02476e67a7.png – Leos Literak Nov 15 '20 at 12:51
I am not totally sure about that one, it looks like the tooltip is getting out of canvas bounds so it can't draw it anymore but I dont know if this is a chart.js internal issue or a wrapper issue. – LeeLenalee Nov 15 '20 at 12:58
1

Guess its an internal issue, although it might have been fixed with the upcomming major release of version 3 of the library. https://stackoverflow.com/questions/44497200/chartjs-tooltip-is-cut-off-when-out-of-canvas – LeeLenalee Nov 15 '20 at 13:05
:library="{ layout: { padding: { bottom: 50 } } }" – Leos Literak Nov 15 '20 at 14:27

BlackSheep · Answer 2 · 2020-11-15T11:00:40.197

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

score 1 · Answer 3 · answered Nov 15 '20 at 10:45

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 Answers3