Highcharts instance created in which Angular life cycle hook

user_13223056 0
Viewed 416

I am currently using Angular 7+ with Highcharts API.

I integrated Highcharts using the following Official Github Link.

There is a callbackFunction in Highcharts which we can use to get the chart instance . However, i am yet to figure out 2 things:

  1. When does the actual instance of chart gets created along with the options, like in which lifecycle hook in Angular? Or is it independent of the lifecycle hooks.

  2. I saw a developer's example in which he used the callbackFunction while inside the ngOnInit lifecycle hook and it worked ( i.e we got a chart instance from the callback ). However the same did not work for ngOnChanges hook.

    So my point was that, suppose there is an @Input property related to graph data which is to be rendered by the Highcharts.chart ( like say appending a new series ), then i would have to use ngOnChanges method in order to detect changes in input property and ngOnChanges would be called before ngOnInit as per this . How would i get the chart instance then ? and how would i do an addSeries then ?

  3. Why does addSeries work only on button click and not in ngOnInit ? Uncomment line number 59 inside hello.component.ts to see it.

Link to the code.

Please see hello.component.ts for any details.

angular highcharts
2 Answers

Demo Here you just need to update chartoptions If you want update data

ngOnChanges(){
    console.log(this.newData); 
    this.chartOptions.series[0]=this.newData;      
  }

If you want add new series

ngOnChanges(){
    console.log('Inside ngOnchanges');
    this.chartOptions.series.push(this.newData)   
  }

  1. Highchart is created after you set chartoptions of Highchart

  2. You can define callback ngOnchange or ngOnInit.In both it works. But you missed that your this.chartCreated.addSeries(this.newData) is not working there because it is async function so outside of callback you may not define chartCreated. If you put this code in callback function you will see that it will add new series. Your first series created with chartoptions.

  3. It works with onclick because before click your callback has already defined your chartCreated That is why click works.

As a final you don't need to create extra variable ,you can use chartoptions to update or add new series.

user_25762540

As per explanation given by @pc_coder , i removed ngOnInit, and implemented addSeries inside ngOnChanges and it worked. 

export class HelloComponent implements OnChanges {
  @Input() name: string;
  @Input() newData: any;
  title = 'AngularTest';
  chartCreated;


  Highcharts: typeof Highcharts = Highcharts;
  chartCallback: Highcharts.ChartCallbackFunction;
  updateFlag: boolean = false;
  clicked:boolean = false;

  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }]
  };

  // ngOnInit(){
  //   console.log('Inside ngOnInit');
  //   this.chartCallback = (chart) => {
  //               this.chartCreated = chart;
  //               console.log('chart: ' + chart); // shows object
  //           }
  //  
  // }

  ngOnChanges(){
    console.log('Inside ngOnchanges');
    this.chartCallback = (chart) => {                  
                this.chartCreated = chart;
                console.log('chart: ' + chart);
                this.chartCreated.addSeries(this.newData); // This worked :)
            }

  }


  onClick(){
    if(this.clicked==false){
      this.chartCreated.series[0].data[0].update(4);
      this.clicked = true;
    //this.chartCreated.addSeries(this.newData); // works on uncommenting  
    }
    else{
      this.chartCreated.series[0].data[0].update(1);
      this.clicked = false;
    }
  }
}

It supports his point that : " callback is async and does not depend on OnInit/OnChanges " and also " chart instance is created after the options for it is set ".

user_132230560
Related