Chart.js annotations in Vue.js break when defined in data ()

Question

I've run into a problem using chartjs-plugin-annotations in a Vue.js application

We've been successfully embedding ChartJS charts in our Vue applications for a while with the config for the chart defined in the data () section of the components.

However when we have added in the chartjs-plugin-annotation plugin we have been unable to get the annotations working unless we define the config locally and return the new Chart directly. This obviously causes problems with updating the chart.

This is the basic model we are using with Annotations

  async setChart (ctx) {
   const config = {
     type: 'bar',
     data: {},
       ..      
   }
   // populate the dateset 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 full example fiddle is here

This is fine (or at least works) when we are using the charts statically however we have at least page where we need to change the chart depending on selections on the page. In this instance the new Chart is rendering the new data but keeping the old chart as well. The browser then flicks between charts when moused over. This can be seen in the example above.

Ideally we should be using the update() method of chartJS in this case, but as we are not assigning the chart to a global we cannot access it after creation

Any thoughts?

Answer 1

This question: Annotations are not displayed in Chart.js links to the solution

There is an issue with annotation and Chart.js 2.9.4, the solution is to downgrade to Chart.js 2.9.3