diff --git a/docs/README.md b/docs/README.md
index bc68e13..390e8bd 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 | width | chart width |
 | height | chart height |
 | chart-id | id of the canvas |
-
+| css-classes | String with css classes for the surrounding div |
+| styles | Object with css styles for the surrounding div container |
 
 ## Examples
 
@@ -176,7 +177,8 @@ export default Line.extend({
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
-    // this.chartData is created in the mixin
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
 })
diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
index 7d4038a..2f15989 100644
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -20,7 +23,6 @@ export default Vue.extend({
       ]
     )
   },
-
   props: {
     chartId: {
       default: 'bar-chart',
@@ -33,9 +35,22 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
-
   data () {
     return {
       defaultOptions: {
diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
index 070dd64..9f0f44e 100644
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
index 0d31c5f..2ca4dfe 100644
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/HorizontalBar.js b/src/BaseCharts/HorizontalBar.js
index 43b1fa9..efe98b5 100644
--- a/src/BaseCharts/HorizontalBar.js
+++ b/src/BaseCharts/HorizontalBar.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
index ab2be0d..615b4e6 100644
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
index d9f8ed5..848ba5d 100644
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
index 72c21ce..df7156b 100644
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
index 3e7ffd7..3ecbf7b 100644
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/BaseCharts/Scatter.js b/src/BaseCharts/Scatter.js
index 80f101c..f108f37 100644
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.js
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 
diff --git a/src/examples/App.vue b/src/examples/App.vue
index 289e82c..06f150c 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="container">
     <div class="Chart">
-      <h1 style="text-align:center;">Barchart</h1>
-      <bar-example></bar-example>
+      <h1 style="text-align:center;">Barchart</h1> <button @click="increaseHeight()">Increase</button>
+      <bar-example :styles="myStyles"></bar-example>
     </div>
 
     <div class="Chart">
@@ -79,7 +79,8 @@
     },
     data () {
       return {
-        dataPoints: null
+        dataPoints: null,
+        height: 20
       }
     },
     mounted () {
@@ -88,6 +89,9 @@
       }, 2000)
     },
     methods: {
+      increaseHeight () {
+        this.height += 10
+      },
       getRandomInt () {
         return Math.floor(Math.random() * (50 - 5 + 1)) + 5
       },
@@ -103,6 +107,14 @@
           ]
         }
       }
+    },
+    computed: {
+      myStyles () {
+        return {
+          height: `${this.height}px`,
+          position: 'relative'
+        }
+      }
     }
   }
 </script>