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>
```
This commit is contained in:
Jakub Juszczak
2017-07-31 21:42:48 +02:00
parent e0c771f3d3
commit 32229fbfdd
11 changed files with 181 additions and 16 deletions

View File

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