Chartkick-vue bar chart - "horizontalBar" is not a registered controller

user_1639556 0
Viewed 5308

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:

enter image description here

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?

chartkick chart.js vue.js javascript
2 Answers
user_159610720

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

demo

user_62771510
Related