tjprange1
Posts: 22
Joined: Thu Oct 28, 2021 5:38 pm

Updating series

Hi,

Our Angular application is getting data updates in intervals. We're taking api data and converting it a Highcharts.Chart object so it can be displayed on the chart correctly. It seems that on subsequent api requests, the previous data still exists on the chart.

For instance, response A comes in as

responseA {
a: [1,2,3,4]
b: [1,2,3,4]
c: [1,2,3,4]
}

And then response B comes in

responseB {
a: [1,2,3,4]
}

When I update the Highcharts.Options with responseB, the properties b and c still exist on the chart.

From my various reading, the best way to handle this is to clear the original series (chart.series.remove()) upon a data update and then reconfig the new options object. The other option I've come across is redrawing a completely new chart using the new data.

Are there any other ways to update the series on a data refresh?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Updating series

Hi tjprange1!
Thanks for contacting us with your question!

If you want to change the data you shouldn't destroy the chart and create it again. It is better to use a series.setData method, which should be called when you want to update it, e.g. after receiving it from somewhere. This method will replace data with the new one. You can read more about it in the documentation here: https://api.highcharts.com/class-refere ... es#setData

Also, the optimal way to update chart in Angular will be using a updateFlag set to true. It is a boolean to trigger an update on a chart as Angular is not detecting nested changes in an object passed to a component. You can check the simple demo below.

Demo: https://stackblitz.com/edit/highcharts- ... way-ne7ybi
Docs: https://github.com/highcharts/highchart ... ns-details

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
tjprange1
Posts: 22
Joined: Thu Oct 28, 2021 5:38 pm

Re: Updating series

Excellent, thank you for these suggestions! I'll play around and try and improve my current solution.

Question - is there an option event function to call theseries.setData() function in?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Updating series

tjprange1,

setData method should be called when you want to change the data, for example in some interval or just by clicking some button. Here is a simple demo of using setData: https://jsfiddle.net/gh/get/library/pur ... s-setdata/

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”