Untitled
unknown
plain_text
a year ago
2.8 kB
4
Indexable
const seriesData = this.overviewData!.monthlyStats.map(stat => stat.numberOfResponses) || []; const xaxisCategories = this.overviewData!.monthlyStats.map(stat => stat.month) || []; if (this.chart) { // Update the existing chart with the new data this.chart.updateSeries([{ name: this.translate.instant("OVERVIEW_CHART_TITLE"), data: seriesData }]); this.chart.updateOptions({ xaxis: { categories: xaxisCategories } }); } else { var options = { chart: { width: "100%", height: 400, type: 'bar', toolbar: { show: false }, dropShadow: { enabled: true, enabledOnSeries: false, top: 0, left: 0, blur: 2, color: '#3399DE', opacity: 1 } }, states: { hover: { filter: { type: 'darken', value: 0.9, } } }, series: [{ name: this.translate.instant("OVERVIEW_CHART_TITLE"), data: seriesData }], xaxis: { categories: xaxisCategories }, dataLabels: { enabled: false, }, colors: ['#D7ECFB'], grid: { row: { colors: ['transparent'] }, column: { colors: ['transparent'] }, xaxis: { lines: { show: true } } }, legend: { show: true, showForSingleSeries: true, position: 'top', horizontalAlign: 'center', markers: { width: 36, height: 14, strokeWidth: 3, strokeColor: '#72BEF1', fillColors: '#D7ECFB', }, onItemClick: { toggleDataSeries: false }, } } if (this.overviewData.monthlyStats.length !== 0) { this.chart = new ApexCharts(document.querySelector("#overviewChart"), options); this.chart.render(); } }
Editor is loading...
Leave a Comment