From 2a20eb8cdc1834e2ca4478c5b9a7be8c88d77737 Mon Sep 17 00:00:00 2001
From: James Futhey <kidGodzilla@users.noreply.github.com>
Date: Mon, 26 Sep 2022 12:53:25 -0700
Subject: [PATCH] fix: legacy multiple annotations (#910)

* Multiple charts with annotations

Handle multiple instances of a `vue-chartjs` wrapper component when the annotations plugin is in use

* Update index.md
---
 legacy/src/Charts.js       | 11 ++++++-----
 website/src/guide/index.md |  4 ----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/legacy/src/Charts.js b/legacy/src/Charts.js
index 0de46143..09446096 100644
--- a/legacy/src/Charts.js
+++ b/legacy/src/Charts.js
@@ -26,7 +26,7 @@ import {
 const ANNOTATION_PLUGIN_KEY = 'annotation'
 
 export function generateChart(chartId, chartType, chartController) {
-  let _chartRef = null
+  let _chartRef = {}
 
   return {
     props: {
@@ -69,7 +69,8 @@ export function generateChart(chartId, chartType, chartController) {
     },
     data() {
       return {
-        _chart: null
+        _chart: null,
+        _id: Math.random().toString(36).substring(2),
       }
     },
     computed: {
@@ -84,7 +85,7 @@ export function generateChart(chartId, chartType, chartController) {
       ChartJS.register(chartController)
     },
     mounted() {
-      _chartRef = { current: null }
+      _chartRef[this.$data._id] = null
 
       if ('datasets' in this.chartData && this.chartData.datasets.length > 0) {
         chartCreate(this.renderChart, this.chartData, this.chartOptions)
@@ -185,11 +186,11 @@ export function generateChart(chartId, chartType, chartController) {
         chartUpdate(currentChart)
       },
       getCurrentChart() {
-        return this.hasAnnotationPlugin ? _chartRef.current : this.$data._chart
+        return this.hasAnnotationPlugin ? _chartRef[this.$data._id] : this.$data._chart
       },
       setCurrentChart(chart) {
         this.hasAnnotationPlugin
-          ? (_chartRef.current = chart)
+          ? (_chartRef[this.$data._id] = chart)
           : (this.$data._chart = chart)
       }
     },
diff --git a/website/src/guide/index.md b/website/src/guide/index.md
index 849f79a7..532dfce0 100644
--- a/website/src/guide/index.md
+++ b/website/src/guide/index.md
@@ -321,10 +321,6 @@ Charts will emit events if the data changes. You can listen to them in the chart
 - `chart:updated` - if the update handler performs an update instead of a re-render
 - `labels:updated` - if new labels were set
 
-## chartjs-plugin-annotation
-
-When using [chartjs-plugin-annotation](https://www.chartjs.org/chartjs-plugin-annotation/latest/) and **Vue 2** simultaneously, you will not be able to place multiple reactive charts on one page.
-
 ## Examples
 
 ### Chart with props