I've encountered an issue while incorporating chartjs-plugin-annotations into a Vue.js application
We have successfully integrated ChartJS charts into our Vue applications by defining the chart's config within the data () section of the components.
However, when we introduced the chartjs-plugin-annotations plugin, we faced difficulties in getting the annotations to function properly unless we defined the config locally and returned the new Chart directly. This led to issues with updating the chart.
Here is the basic model we are using with Annotations:
async setChart (ctx) {
const config = {
type: 'bar',
data: {},
..
}
// populate the dataset for the chart
await this.setChartData(config)
// populate the annotations for the chart
await this.setAnnotations(config)
// create the chart
return new Chart(ctx, config)
}
A complete example fiddle can be found here
While this approach works for static charts, we have a scenario where we need to update the chart based on user selections. In this case, the new Chart renders the new data but retains the old chart as well. As a result, the browser switches between charts when hovered over. This behavior is evident in the provided example.
Ideally, we should be using the update() method of ChartJS in this situation, but since we are not assigning the chart to a global variable, we cannot access it after creation.
Any insights on how to resolve this issue?