How to use Chart.js actions in vue-chart-3?

[do-kevin]

Hey there,

So I'm actually confused on how to use actions in Chart.js in general, even more so with vue-chart-3. Specifically, I am using the chartjs-zoom-plugin and I want to use the resetZoom call. I've tried to use template refs for my chart. It does show renderChart, but not resetZoom. What I want to do is have a button outside of the chart that can call resetZoom.

Does anyone have an example code on how to do this?

[victorgarciaesgi]

Hi! Never used actions on Chart.js so I will look into this! Can be a good feature to add :)

[victorgarciaesgi]

@do-kevin After fellowing your plugin instructions, i had no problem using it with vue-chart-3!

Here is a demo: https://codesandbox.io/s/vue-chart-3-vue-2-mrtej?file=/pages/index.vue

As I understand, all Chart.js plugins are exposed in the main chartInstance object, which can be obtained using template ref.

Your plugin even provides its own typings https://github.com/chartjs/chartjs-plugin-zoom/blob/master/types/index.d.ts

[victorgarciaesgi]

But I will add a section in the documentation. I'm also experimenting accessing the chartInstance directly (without ref) using the vue-chart-3 hooks

[victorgarciaesgi]

Added a section https://vue-chart-3.netlify.app/guide/usage/actions.html :)

[do-kevin]

Hi Victor!

Thank you so much. I totally missed the chartInstance and I had an outdated version of vue-charts-3. This helped a lot.

[victorgarciaesgi]

No problem I updated the package a lot lately :p