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

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