ApexChart Angular is not updating its data/title

Question

I use ApexChart to display data I retrieve from a Server. The chart is empty first and then the title updates to the filename selected, the data to the data from the server.

The problem is: It doesn't update. I've tried changing up the title as well and logged all the data from chartOptions. It is always the right value! But my chart never seems to update after it was initiliazed the first time. I don't get why and I'm thinking of switch away from Apex to something different.

My HTML

<apx-chart #chart style="width: 100%; color: white"
                   [series]="chartOptions.series"
                   [chart]="chartOptions.chart"
                   [xaxis]="chartOptions.xaxis"
                   [title]="chartOptions.title"
                   [theme]="chartOptions.theme"
        ></apx-chart>

TS Data (relevant lines only):

Vars

@ViewChild("chart", {static: false}) chart: ChartComponent | any;
  public chartOptions: Partial<ChartOptions> | any;

Constructor

this.chartOptions = {
      series: [],
      chart: {
        height: 400,
        type: "scatter"
      },
      title: {
        text: ""
      },
      xaxis: {
        type: "numeric"
      },
      dataLabels: {
        style: {
          colors: ['#F44336', '#E91E63', '#9C27B0']
        }
      },
      theme: {
        mode: 'dark',
        palette: 'palette10',
      },
      noData: {
        text: 'Keine Parameter ausgewählt'
      }
    };

Updating the series:

let series: Object[] = []
    this.httpClient.get(url).subscribe((response: any) => {
      const data = JSON.parse(response.data);
      for (let i = 0; i < this.selectedParams.length; i++) {
        const obj = {
          name: this.selectedParams[i],
          data: data[i]
        }
        series.push(obj)
      }
    }
...
this.chartOptions.series = series

Updating the title:

this.chartOptions.title.text = this.analysisFiles[0].name;

As mentioned, when I log chartOptions in the console, it show the right values. But on the page it never updates, even though it is bound to the variables.

BTW: name is a string and the data are paired numeric values f.e. [1,0]

Any ideas? Or just give up ApexCharts all together(only had problems with it)

I tried redoing it with test data, changing the variables bound. Nothing seemed to work.

Changing the title text was also a try to see if it does anything at all. Didn't work either.

Answer 1

Make sure you are changing the data on the series after it has been fetched, inside the subscription. You could try something like this

this.httpClient.get(url).subscribe((response: any) => {
  const data = JSON.parse(response.data);
  this.chartOptions.series = this.selectedParams.map((param, i) => ({
    name: param,
    data: data[i],
  }));
  
});

And also, for the title, try re-assign the entire object

this.chartOptions.title = {...this.chartOptions.title, text: this.analysisFiles[0].name}

This will ensure that reassigments will trigger the detection changes under other components