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..a7da41eb 100644 --- a/src/examples/App.vue +++ b/src/examples/App.vue @@ -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' + } + } } }