vue-chartjs v4 reference to the chart object

Question

chartjs v3.7.1
vue-chartjs v4.0.4

in version 3 of vue-chartjs, I could reference the chart object with this.$data._chart because the component is extends from the chart component.

but in version 4, it just uses the chart component directly, how do I get a reference of the chart object? I tried the :ref directive, but it only return the dom element, not the chart object.

and I couldn't find any example with v4.0.4

Answer 1

After toying around with the same/similar problem myself, I found a solution for me:

No, idea if it's an ok solution, or if I am breaking with some core principles whatsoever, since tony19 wrote, that the chart instance is not exposed as public property. So, please, keep that in mind.

I am using (among others):

• vue: ^3.2.33
• vue-chart-3: ^3.1.8
• chart.js: ^3.7.1
• chartjs-plugin-zoom: ^1.2.1

and I want to call resetZoom() on my chart. For that, I need that chart object to call that function on. I assume, that's the same chart object you are looking for? If not, please, comment, and I can delete the answer.

I my vue file I got something like:

<template>
  <BarChart ref="mychart" />
</template>

And then I call in the function of my reset-zoom button:

resetZoom() {
  const r = this.$refs.mychart as any;
  r.chartInstance.resetZoom();
}

So: using a ref to get the object, and then chartInstance