Vue ChartKick - different colours for bar chart

Question

I use a vertical bar chart and I want to specify different colors for each bar:

main.js

import Chartkick from 'vue-chartkick';
import Chart from 'chart.js';
Vue.use(Chartkick.use(Chart));

File.vue

<column-chart :data="chartData" width="800px" :colors="['#0b6e00', '#006ca2', '#ff3333', '#d60001']"></column-chart>

But only the first color is used and all bars have the same colour.

I tried to pass a :library attribute with backGround colour parameter as well without luck. Line chart accepts different colours.

score 4 · Accepted Answer · answered Apr 10 '20 at 11:20

4

It will work if you define :colors as a nested array as follows:

<column-chart 
  :data="chartData" 
  width="800px" 
  :colors="[['#0b6e00', '#006ca2', '#ff3333', '#d60001']]">
</column-chart>

Please have a look at the following StackBlitz

answered Apr 10 '20 at 11:20

uminder

Thank you. I was about to switch the library. What is the reason for having two arrays? – Leos Literak Apr 10 '20 at 13:13
2

@Leos Literak: Unfortunately I don't know about the reason and I never heard about `vue-chartkick` before. I was making different attempts and suddenly it worked. – uminder Apr 10 '20 at 13:30
Very weird :) + Zero docs. Nice solution :) In my opinion, it's better to use the core chart.js library (For simple color setting you need to open StackOverflow Q). – Ezra Siton Apr 10 '20 at 17:55
@LeosLiterak By having an array inside the array, you define the colors one by one. But if you want all the columns to have to same color, you can just do `:colors="['color']"` – K. P. Apr 13 '20 at 09:35
Thank you for an explanation – Leos Literak Apr 13 '20 at 11:08
Excellent Thanks! Makes my day :) – Anoop Thiruonam Jun 17 '20 at 07:10

1 Answers1