victorgarciaesgi / vue-chart-3

📊 A simple wrapper around Chart.js 3 for Vue 2 & 3

Home Page:https://vue-chart-3.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to trigger reactivity / re-render chart by hand?

Anubarak opened this issue · comments

How is it possible to re-render the chart by hand when data changes?

I made this little sandbox where I wand to change the axis by user input.
https://codesandbox.io/s/suspicious-monad-h5ecd?file=/src/components/Chart.vue

Changing the xMax / xMin changes indeed the passed options to your chart (I render the options above the chart) but the chart itself does not change.
Is it maybe because you commented out your watcher? https://github.com/victorgarciaesgi/vue-chart-3/blob/main/src/components.ts#L65-L73

Could you please explain how I can achieve that?
Btw: thank you very much for your time and effort. I like your library :)

Hi and thanks for the report!

Normaly the chart re-render automaticaly when the data changes!
I had to change how the options works because of numerous bugs when options is reactive :(

The solution for now is to force rerender by using the chartInstance, you can get it by using event chart:render, or the prop onChartRender.

I'm working on a solution to make options reactive again :)

0.3.8 should have working reactive options! (tested on vue 2), working on a vue3 repro

Wow, thank you so much for your incredible fast response.
Alright, I'll play around a little bit.

Awesome, I updated to your version and it works great.
Thank you