vue chartjs zoom reset

Question

I am trying to use chartjs-plugin-zoom to implement zooming on a chart using vue-chartjs. With the code below, I get a this.$refs.myChart.resetZoom is not a function error. How do I correctly get a reference to the chart so that I can call the resetZoom function?

<template>
    <div>
        <button @click="resetGraph">Reset</button>
        <Bar
            id="myChart"
            ref="myChart"
            :options="chartOptions"
            :data="chartData"
        />
    </div>
</template>
  
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom';

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true,
        indexAxis: 'y',
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }
    }
  },
  methods: {
    resetGraph() {
      this.$refs.myChart.resetZoom()
    }
  }
}
</script>

Answer 1

Changing this.$refs.myChart.resetZoom() to this.$refs.myChart.chart.resetZoom() fixed the issue for me.