diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
index 7f22df1..33e70f4 100644
--- 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
index 4f421d6..ab4d087 100644
--- 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
index 70cee69..c45b24f 100644
--- 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
index 4eb89af..9941cc1 100644
--- 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
index 1c5f8bf..a51197a 100644
--- 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
index a5f5eaf..f446477 100644
--- 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()
   }
 })