✨ Add canvas id as prop

Author: apertureless

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}}" v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'bar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number

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}} v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'doughnut-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number

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}} v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'line-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number

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}} v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'pie-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number

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}} v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'polar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number

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}} v-el:canvas></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'radar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number