Merge pull request #3 from LinusBorg/properly_destroy_chartsjs_objects

Properly destroy chartjs objects
apertureless · Aug 19, 2016 · ad7cabe · ad7cabe
2 parents d1bd9ef + 90d9d87
commit ad7cabe
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
@@ -45,14 +45,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
@@ -28,14 +28,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
@@ -43,14 +43,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'line',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
@@ -28,14 +28,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
@@ -28,14 +28,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
@@ -28,14 +28,17 @@ export default Vue.extend({
 
   methods: {
     render (data, options = this.options) {
-      const chart = new Chart(
+      this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
           options: options
         }
       )
-      chart.generateLegend()
+      this._chart.generateLegend()
     }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
   }
 })