From 32229fbfdd920d39bf6653f92b7a55e3ec5c749c Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Mon, 31 Jul 2017 21:42:48 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Add=20dynamic=20styles=20and=20?=
 =?UTF-8?q?css=20classes=20as=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                  |  6 ++++--
 src/BaseCharts/Bar.js           | 21 ++++++++++++++++++---
 src/BaseCharts/Bubble.js        | 19 ++++++++++++++++++-
 src/BaseCharts/Doughnut.js      | 19 ++++++++++++++++++-
 src/BaseCharts/HorizontalBar.js | 19 ++++++++++++++++++-
 src/BaseCharts/Line.js          | 19 ++++++++++++++++++-
 src/BaseCharts/Pie.js           | 19 ++++++++++++++++++-
 src/BaseCharts/PolarArea.js     | 19 ++++++++++++++++++-
 src/BaseCharts/Radar.js         | 19 ++++++++++++++++++-
 src/BaseCharts/Scatter.js       | 19 ++++++++++++++++++-
 src/examples/App.vue            | 18 +++++++++++++++---
 11 files changed, 181 insertions(+), 16 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index bc68e137..390e8bd5 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 7d4038a1..2f15989a 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 070dd641..9f0f44ea 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 0d31c5fa..2ca4dfed 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 43b1fa9a..efe98b55 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 ab2be0d4..615b4e64 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 d9f8ed52..848ba5dd 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 72c21cee..df7156b9 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 3e7ffd75..3ecbf7b7 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 80f101cb..f108f371 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 289e82c4..06f150cd 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>

From 7e52380bd43b61fdd33fc98e7ef34814056e9a3d Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Mon, 31 Jul 2017 21:46:37 +0200
Subject: [PATCH 2/2] Clean up example

---
 src/examples/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/examples/App.vue b/src/examples/App.vue
index 06f150cd..a7da41eb 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> <button @click="increaseHeight()">Increase</button>
-      <bar-example :styles="myStyles"></bar-example>
+      <h1 style="text-align:center;">Barchart</h1>
+      <bar-example></bar-example>
     </div>
 
     <div class="Chart">