CODEWITHSUNDEEP
vue.jschart.jschartkick
Leos Literak
Leos Literak

Reputation: 9406

Vue ChartKick - different colours for bar chart

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.

enter image description here

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

Upvotes: 2

Views: 1495

Answers (1)

uminder
uminder

Reputation: 26190

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>

enter image description here

Please have a look at the following StackBlitz

Upvotes: 4

Related Questions