Highcharts Angular update chart with new options - including linked series

user_2473770 0
Viewed 564

Please see my edited demo that uses the official highcharts-angular wrapper.

Initially the chart has a blue series with type:arearange and dataGrouping, as well as a red overplotted series. Note the tooltips refer to the points of the red series. More info in the demo.

The first button will add another such pair of series. The code uses addSeries to do so. It works.

The second button should do the same, but by changing the chart options instead of addSeries. It does not work. The new series appears, but all the red series and tooltips disappear. The desire is to make this method work!

I have studied the (nice) highcharts-angular demos and instructions, but I cannot make it work in my case.

angular highcharts
1 Answers

If you would like to update the chartOptions, please don't use any API methods like update, addSeries or redraw.
Instead, focus on the options which are declared in the state- chartOptions. This basically means that you have to convert the addAllDummySeries method in order to use that approach.

Please look a the simple example below. We are not using any reverence to the chart, only we are changing the options declared above, not that one generated by Highcharts. By changing the state we are telling Angular to make a redraw.
Demo: https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-hktwwr

Also in my opinion using the oneToOne flag set to true is not a good idea. Please see the difference in the demo below.
Demo: https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-w5pnwd

user_129926890
Related