I'm currently in the process of upgrading my website from vue 2 to vue 3. As part of this upgrade, I also needed to update vue-chartjs from version 4 to 5. Unfortunately, it seems that this update has caused some issues with my click event functionality.
In the past, I had the chart displayed on my page like this:
<bar v-if="loaded"
ref="chart"
:data="chartData"
:options="chartOptions">
</bar>
import { Bar } from 'vue-chartjs';
Previously, I could use the following code in my options click event:
onClick: event => {
const chart = this.$refs.chart._data._chart;
const activeElement = chart.getElementAtEvent(event)[0];
}
After the upgrade, _data is now undefined. I attempted to access the chart object using this.$refs.chart.chart, but now I am encountering the following error:
chart.getElementAtEvent is not a function
Does anyone have any insight on how to retrieve the chart in order to call the getElementAtEvent method? Or perhaps if there's a different approach to getting the label from the clicked bar?