I want to convert my vertical column chart to a horizontal stacked bar. I use chartkick-vue
0.61 with chart.js
3.0-beta.
My current code:
<column-chart :data="chartData" suffix="%"
height="200px"
:colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]">
</column-chart>
is rendered this way:
I found this doc, but I have no clue how to pass this to chartkick-vue
, so I started with horizontal bar:
<bar-chart
:data="chartData"
suffix="%"
height="200px"
:colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"
>
but it fails with:
Error Loading Chart: "horizontalBar" is not a registered controller
This is code sandbox: https://codesandbox.io/s/pensive-williamson-upohe
How do I solve it?
chart.js
's docs indicate that the horizontalBar
type was removed in 3.x, but chartkick-vue
still uses it.
The solution is to use the current stable release of chart.js
(2.x) instead of the 3.x beta:
npm i -S chart.js@^2