Error refreshing chart options

[javier-arregui]

When the same chart object is used to show different charts, the chart options refresh is not working properly and the result is a wrong chart being displayed. There is somehow some information from previous chart still present in the new one, producing a wrong result.

I created an example reusing the one created by dolanmiu in issue number 174 (credits for him):
https://stackblitz.com/edit/angular-hc53bc

• Initially, chart1 is correctly shown. Clicking on Chart Two displays wrong categories
• Clicking on Chart One displays wrong xAxis ("datetime" is completely broken and showed as numbers)

Chart options in both tabs are refreshed using JSON.parse(JSON.stringify()) so they are isolated, clean object instances.

[karolkolodziej]

Thanks for bringing that up. I’ll only add this ticket(#174) as this one inherit’s something.

As it comes to your issue there are a few things:

1. The datetime axis type doesn’t work exactly well in cases like yours. Please read more about that in the issue linked below. As a workaround, you might use an ordinary numeric type with some custom label formatter to make labels similar to one from the datetime type. I also used Kacper's workaround categories: false from that issue.
   GH issue: dynamic Chart update not working properly when changing x-axis's type=datetime in place of category. highcharts#9889

2. The data layout should be similar. In this case, I converted data into an array of values.

3. The oneToOne property should be enabled to make sure that each series is updated (most useful when there is a different number of series between configs).
   Docs: https://github.com/highcharts/highcharts-angular#options-details

The issue is connected with the main library and how the update method works, not with the wrapper itself. Issue recreated in the JS.
Live demo JS: https://jsfiddle.net/BlackLabel/x7zbuqhk/
Live demo Angular: https://stackblitz.com/edit/angular-bgvaxz

[javier-arregui]

Ok, thanks for the quick response

My real use case involves many other complex scenarios where I see side effects of how update method works... for example, setting categories: false in xAxis and adding the oneToOne property seem to partially work... but for example the colors of the series change every time I come back to the same chart definition.

To be honest, the fact that "when updating chart's elements with new options, old options are not removed" is completely unexpected from development perspective. Is that a design decision or is it something you plan to change?

If that behaviour is a design decision, then the only option for me is to completely avoid reusing the same chart object for different charts. For a complex application like ours, reusing the chart can lead to many workarounds in the dynamic chart definition generation just to clean any previous state. This is not maintainable in the future as new chart types are displayed or new side effects are discovered.

Or maybe there could be a way of forcing a full cleanup of previous options...

Thanks!

[karolkolodziej]

The update method works like this by design. It's usually used to make some small changes on the chart so it would not be reasonable to pass the whole config to the chart for each time.

What you have described sounds more like destroying the chart and then creating in as a new one in the same place. Or you might remove each series and the add the new one. The same with the axes. This approach doesn't limit you in the axis type, oneToOne etc.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-irxuty

[javier-arregui]

Yes, I see... the destroy() method you use would be the way to force the cleanup and it works.

I suggest you somehow update the docs to state a bit more clearly the intent and limitations of the allowed options data binding and associated chart update. I couldn't find any reference to it and it's (at least for me) misleading.

Thanks for your support, I close the issue