From 975a804570d46354d2576aa7ca944a4f03d454e4 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Fri, 23 Sep 2016 13:29:03 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20chartId=20as=20prop=20and=20f?=
 =?UTF-8?q?ix=20width=20and=20height=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
---
 src/BaseCharts/Bar.js       | 6 +++++-
 src/BaseCharts/Bubble.js    | 6 +++++-
 src/BaseCharts/Doughnut.js  | 6 +++++-
 src/BaseCharts/Line.js      | 6 +++++-
 src/BaseCharts/Pie.js       | 6 +++++-
 src/BaseCharts/PolarArea.js | 6 +++++-
 src/BaseCharts/Radar.js     | 6 +++++-
 7 files changed, 35 insertions(+), 7 deletions(-)

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