diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
index c2e056c..2555ec9 100644
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,7 +5,7 @@ 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="bar-chart" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
     </div>
   `,
 
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
index e2ab7a3..a585151 100644
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,7 +5,7 @@ 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="doughnut-chart" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
index d091c87..9b13540 100644
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,7 +5,7 @@ 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="line-chart" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
index 39e6c56..3293af2 100644
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,7 +5,7 @@ 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="pie-chart" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
index 3636527..2466523 100644
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,7 +5,7 @@ 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="polar-chart" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,
 
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
index fa2a4d0..43ba54a 100644
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,7 +5,7 @@ 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="radar-chart" width={{width}} height={{height}} v-el:canvas></canvas>
     </div>
   `,