Added series does not remains in highcharts on show/hide of chart container

Question

I am using addSeries feature of highcharts to add series dynamically. It is working perfectly when we add series, problem occurs when we show/hide container of the charts added series disappears.

demo

App.component

export class AppComponent {
  name = 'Angular 4';
  chart: any = {};
  dip: boolean = true;
  saveInstance(chartInstance): void {
    this.chart = chartInstance;
  }
  constructor() {
    this.options = {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }]
    };
  }
  options: Object;
  addSeries() {
    this.chart.addSeries({
      data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    });
  }
  toggle() {
    this.dip = !this.dip;
  }
}

How to retain added series even we show/hide chart container?

Note: In real case the series are added dynamically (there are no predefined values)

Answer 1

The documentations states that ng-show (and its sibling ng-hide ) toggle the appearance of the element by adding the CSS display: none style. ng-if , on the other hand, actually removes the element from the DOM when the condition is false and only adds the element back once the condition turns true.

So, you have to work with hidden or display property from CSS. Below you have some code snippets:

Option 1:

<div [style.display]="!dip ? 'block' : 'none'">
   <chart [options]="options" (load)="saveInstance($event.context)" ></chart>
</div>

Option 2:

<div [hidden]="dip">
    <chart [options]="options" (load)="saveInstance($event.context)" ></chart>
</div>

Demo: here

Cheers!

Answer 2

Demo: https://stackblitz.com/edit/angular4-x-range-highcharts-jrtvr2

Instead of

<div *ngIf="dip">

use

 <div [hidden]="dip">

Actually whenever you are clicking on that button its loading the chart again. So its better to show and hide via display instead of loading.