mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
✨ 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:
@@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user