I have created a shared HighCharts component in my angular project. I am passing chartoptions to it from all consuming components and I'm trying to access the "visible" property on each series in the consuming component. These values I get don't seem to have updated stauses even though I toggle the legends in the chart

Here is the implementation where i'm trying to access the statuses on click of a button in app component.

CodePudding user response：

As I mentioned in the comments. You are just re-reading the option's value. You need something else to get the latest state of the series. render event could help you there. A workaround like below may fit your need :

  chartOptions = {
    ...new progressMonitoringGraphConfig(this.mockData).graphConfig,
    chart: {
      events: {
        render: (ctx) => {
          this.seriesVisibility = ctx.target.series.map(
            ({ visible }) => visible
          );
        },
      },
    },
  };
  seriesVisibility = this.chartOptions.series.map(({ visible }) => visible);

  printStatus() {
    console.log(this.seriesVisibility);
  }

Stackblitz