Chartjs-Vue-chartjs v4 reference to the chart object

by

0👍

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

Leave a comment