Does this library work with composition-api?

[yuta17]

Does this library work with composition-api?

How do I make it work?

[mabarbeau]

The composition-api was introduce in Vue 3.0 and isn't currently supported.

[apertureless]

👆
Yeah this.

[mabarbeau]

@apertureless Any plans for Vue 3 support?

[apertureless]

If I find the time, yes :D

[MarcoVdE]

@apertureless would it perhaps be possible to please make a sticky of this or another issue stating Vue 3 support please? It will probably be one of the most searched issues for those wanting to upgrade.

[dacoto97]

+1

[davidrunger]

I wanted to upgrade my application to Vue 3, but I found that vue-chartjs is not yet working with Vue 3. My rough and hacky solution is contained in the vue-chartjs fork here: https://github.com/davidrunger/vue-chartjs/pull/1 (Fix Vue 3 compatibility).

If you are using yarn, you can direct your application to install vue-chartjs from that fork/branch via:

yarn add https://github.com/davidrunger/vue-chartjs.git\#vue-3

For me, no changes to my application code were necessary other than that command (which updates package.json and yarn.lock).

In case you're curious about some of the details, I added some comments on that pull request (link again) explaining why I made the particular changes that I did. Happily, I didn't need to make very many changes to vue-chartjs in order to get it working with Vue 3 in my application.

Disclaimer

I cannot guarantee that my branch will solve all Vue 3 compatibility issues for all applications; I made no effort to update all relevant parts of vue-chartjs for Vue 3, but rather I only fixed the particular things that were breaking in vue-chartjs as used by my particular application when using Vue 3. My application doesn't use vue-chartjs too extensively, so there are probably other things that should/must be updated in vue-chartjs in order to achieve full Vue 3 compatibility in all cases / for all applications. Nevertheless, I did want to share my work here, in case it's of any use to others in its current rough form as a fork and/or in case it's helpful to @apertureless (or other contributors) in the effort to update the official version of this package for Vue 3 compatibility.

[victorgarciaesgi]

For everyone, i've just released a port of vue-chartjs that is working for both Vue 2 & Vue 3 with composition-api and Chart.js 3!

https://github.com/victorgarciaesgi/vue-chart-3

Demo: https://codesandbox.io/s/demo-vue-chart-3-ugynm?file=/src/App.vue

[kyrylo93]

@victorgarciaesgi, thank you!

I noticed that vue3-charts has no HorizontalBarChart, which I used in vue-charts, will it be added?

[joecampo]

@kyrylo93 The horizontal bar chart was removed in Chart.js 3. You can now just use a regular bar chart, but change the indexAxis from x to y in the options configuration: https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart to make it horizontal.

[agboolaidris]

For everyone, i've just released a port of vue-chartjs that is working for both Vue 2 & Vue 3 with composition-api and Chart.js 3!

https://github.com/victorgarciaesgi/vue-chart-3

Demo: https://codesandbox.io/s/demo-vue-chart-3-ugynm?file=/src/App.vue

how can I implement a stacked bar with this library

[ajerez]

For everyone, i've just released a port of vue-chartjs that is working for both Vue 2 & Vue 3 with composition-api and Chart.js 3!

https://github.com/victorgarciaesgi/vue-chart-3

Demo: https://codesandbox.io/s/demo-vue-chart-3-ugynm?file=/src/App.vue

Thanks for your work.

I have installed your fork but I'm getting this error with the charts load:

Chart.js?30ef:2744 Uncaught TypeError: Cannot read properties of null (reading 'clearRect')

Any ideas what it can be?

Thanks

[victorgarciaesgi]

@ajerez Did you clone the Vue 3 or Vue 2 one? vue-demi have some problems with codesandbox sometimes.
Run vue-demi-switch {version} if you can

[ajerez]

@ajerez Did you clone the Vue 3 or Vue 2 one? vue-demi have some problems with codesandbox sometimes.
Run vue-demi-switch {version} if you can

Sorry it was my fault, I was recreating de library chart components like in the vue-chartjs library docs.
Now I'm importing it directly and all works properly.
Thanks :)

[Pblak]

Apparently vue-chartJs don't accept vue 3 yet

[apertureless]

It is beeing worked on.

[thabarbados]

vue-chartjs supports Vue3 and composition-api now!

[diegosasw]

Is there anywhere with vue3 examples using composition api?