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:
@@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user