score:0

Accepted answer

there are two main things that don't work. but before i could explain let's look at the code responsible for creating the chart in the wrapper.

ngonchanges(changes) {
        const update = changes.update && changes.update.currentvalue;
        if (changes.options || update) {
            this.wrappedupdateorcreatechart();
            if (update) {
                this.updatechange.emit(false); // clear the flag after update
            }
        }
    }
    wrappedupdateorcreatechart() {
        if (this.runoutsideangular) {
            this._zone.runoutsideangular(() => {
                this.updateorcreatechart();
            });
        }
        else {
            this.updateorcreatechart();
        }
    }
    updateorcreatechart() {
        if (this.chart && this.chart.update) {
            this.chart.update(this.options, true, this.onetoone || false);
        }
        else {
            this.chart = this.highcharts[this.constructortype || 'chart'](this.el.nativeelement, this.options, this.callbackfunction || null);
            // emit chart instance on init
            this.chartinstance.emit(this.chart);
        }
    }

as you can see, everything is happening in the ngonchanges hook. if the change is detected the series of methods are fired to finally update the chart.

and now the things which don't work:

  1. in the case when there is any asynchronous code happening in the subscribe (like for example http request - on my example mocked by settimeout) you have to manually set to wrapper that is should be updated by setting the updateflag. because angular doesn't detect changes in some properties in the chartoptions.

  2. if you split assigning properties to the chartoptions like in the code snippet below set the onetoone flag to true

     this.chartoptions.xaxis = {
            categories: categories
          };
          this.chartoptions.series = [{
            type: "column",
            name: "cities",
            data: dataseries
          }];

docs: https://github.com/highcharts/highcharts-angular#options-details
demo: https://stackblitz.com/edit/highcharts-angular-basic-line-vwrrmx

score:0

there is one thing that isn't necessary inside your code that causes that issue.
you don't have to destroy the chart reference here. when you remove that everything works as expected.

ngondestroy() {
   this.chartref.destroy()
}

please also note that creating a second chart inside the subscribe isn't ideal. insted use updateflag.

this.highcharts.chart('container', this.chartoptions);

demo: https://stackblitz.com/edit/highcharts-angular-basic-line-nxzqvy


Related Query

More Query from same tag