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:
options
, like in which lifecycle hook in Angular? Or is it independent of the lifecycle hooks.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 ?
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.
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)
}
Highchart is created after you set chartoptions of Highchart
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With