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
Site Moderator
Posts: 1166
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
Site Moderator
Posts: 1166
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
Zolotoy
Posts: 272
Joined: Tue Apr 14, 2020 10:06 am

Re: Updating series

In the provided Angualar example for series updates what is [(update)]? Does a chart have a property "update"?
User avatar
dawid.d
Site Moderator
Posts: 960
Joined: Thu Oct 06, 2022 11:31 am

Re: Updating series

Hi Zolotoy!

The [(update)] is a boolean to trigger an update on a chart as Angular is not detecting nested changes in an object passed to a component. If you set a variable connected to it to true, after the chart is updated, it will be changed asynchronously to false by the Highcharts-Angular component.

See more here: https://github.com/highcharts/highchart ... ns-details

Best regards!
Dawid Draguła
Highcharts Developer
Zolotoy
Posts: 272
Joined: Tue Apr 14, 2020 10:06 am

Re: Updating series

So, the update property is on the chart object. When I am trying to set up it like this:
chart.update = this.updateFlag the property doesn't exist.
User avatar
dawid.d
Site Moderator
Posts: 960
Joined: Thu Oct 06, 2022 11:31 am

Re: Updating series

No, it's not property on the chart object, it's a two-way angular data binding AKA "banana in the box".

In the Highcharts Core, there is a update property on a Chart instance indeed, but it's a method.
Read more here: https://api.highcharts.com/class-refere ... art#update
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”