Untitled

 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();
            }
          }