diff --git a/package-lock.json b/package-lock.json index 2efdfbf..98e3b54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -74,7 +74,7 @@ } }, "apexcharts": { - "version": "github:apexcharts/apexcharts.js#48b8b9d550b6d871a40d7251153558f39dbde952", + "version": "github:apexcharts/apexcharts.js#6c7e9a1d768405e94b5fa068e30150bac67981fd", "from": "github:apexcharts/apexcharts.js", "requires": { "promise-polyfill": "8.1.0", diff --git a/src/components/apex-chart/apex-chart.tsx b/src/components/apex-chart/apex-chart.tsx index efc3bda..86bbb9f 100644 --- a/src/components/apex-chart/apex-chart.tsx +++ b/src/components/apex-chart/apex-chart.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, State } from '@stencil/core'; +import { Component, Prop, State, Watch } from '@stencil/core'; import ApexCharts from 'apexcharts'; import { ApexOptions } from 'apexcharts'; import { @@ -46,29 +46,45 @@ export class chart { */ @Prop() type: ApexChartType; - /** - * ApexChart height - * @see https://apexcharts.com/docs/options/chart/height/ - */ - @Prop() height: ApexChartHeight; - /** * ApexChart width * @see https://apexcharts.com/docs/options/chart/width/ */ @Prop() width: ApexChartWidth; + /** + * ApexChart height + * @see https://apexcharts.com/docs/options/chart/height/ + */ + @Prop() height: ApexChartHeight; + /** * ApexCharts options * @see https://apexcharts.com/docs/options/ */ - @Prop() options: ApexOptions; + @Prop({ mutable: true }) options: ApexOptions; + + @Watch('options') + optionsChanged(options) { + if (this.chartObj !== null) { + return this.chartObj.updateOptions( + config(options, this.type, this.width, options, this.series) + ); + } + } /** * ApexCharts series * @see https://apexcharts.com/docs/options/series/ */ - @Prop() series: ApexOptionsSeries; + @Prop({ mutable: true }) series: ApexOptionsSeries; + + @Watch('series') + seriesChanged(series) { + if (this.chartObj !== null) { + this.chartObj.updateSeries(series, true); + } + } componentDidLoad() { if (this.chartObj === null) {