diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
index 2730e68..9f3fcb5 100644
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'bar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
index ce35752..8c24769 100644
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'bubble-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
index 3f60a8a..32df382 100644
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="doughnut-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'doughnut-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
index a3f9db9..2371973 100644
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="line-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'line-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
index 763ed92..cc292d3 100644
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="pie-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'pie-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
index 5713df4..e8a7d62 100644
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="polar-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'polar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
index 6e388cc..962de04 100644
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="radar-chart" width=width height=height ref="canvas"></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'radar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number