✨ Add dynamic styles and css classes as prop

You can now pass in css classes as a string for the surrounding div of the canvas and a styles object which will be applied as inline styles.
This way you can have a dynamic height with `reposnive: true`

## Example

```js
<template>
   <line-chart :styles="myStyles"/>
</template>

<script>
export default {
  data () {
    return {
          height: 100
    }
  },
  computed: {
    myStyles () {
      return {
        height: `${this.height}px`,
        position: 'relative'
      }
    }
  }
}
</script>
```

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)
   }
 })

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: {

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

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'
+        }
+      }
     }
   },
 

src/examples/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="container">
     <div class="Chart">
-      <h1 style="text-align:center;">Barchart</h1>
+      <h1 style="text-align:center;">Barchart</h1> <button @click="increaseHeight()">Increase</button>
-      <bar-example></bar-example>
+      <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>