Performance regression after upgrading from highcharts-angular v4.x to v5.x when rendering many complex charts

[Teddy828]

For general tech support, please see www.highcharts.com/support.
Please report only issues about highcharts-angular wrapper or content of this repository.
For general issues with Highcharts and TypeScript the correct repository to report such issues is main Highcharts repository.

Describe the bug

After upgrading highcharts-angular from v4.x to v5.x, we observed a noticeable performance regression during initial chart rendering, especially when:

• The page contains many charts
• Each chart is relatively complex (multiple series / plotLines / plotBand / custom tooltip)

Compared to v4.x, charts in v5.x:

• Slower initial rendering compared to v4.x
• Visible animation lag when multiple charts are created
• Result in a degraded user experience overall
• The delay becomes more obvious as chart count and chart complexity increase, which matches our real production usage

This issue occurs even when using the same Highcharts version and identical chart options.

Expected behavior

Rendering performance and animation smoothness should be comparable to (or better than) highcharts-angular v4.x when using the same configuration.

Demo

Please provide live demo of the problem or provide any other way to recreate the problem.

Steps required to recreate the problem in the demo:

Two StackBlitz demos using identical chart logic, differing only in the highcharts-angular version.

Demo A – highcharts-angular v5.4.0
https://stackblitz.com/edit/stackblitz-starters-ydsvur8f?file=src%2Fmain.ts

Setup used

• Angular version: ^21.0.3
• TypeScript version: ^5.9.3
• highcharts: 12.4.0
• highcharts-angular: 5.4.0

Demo B – highcharts-angular v4.0.1
https://stackblitz.com/edit/stackblitz-starters-ezlfeawl?file=src%2Fmain.ts

Setup used

• Angular version: ^21.0.3
• TypeScript version: ^5.9.3
• highcharts: 12.4.0
• highcharts-angular: 4.0.1

Steps to reproduce

1. Open each demo
2. Observe the time it takes for charts to appear
3. Compare animation smoothness during initial rendering
4. The v5.x demo consistently renders slower than v4.x
   Performance Compare Video

[Teddy828]

Hi team, do we have any updates regarding this performance issue?

[karolkolodziej]

Hi @Teddy828! Thanks for the bump — I overlooked this issue earlier.

Root cause:
In the previous implementation, chart initialization was synchronous and sequential — each chart was created one after another within a single task.
With the current approach, when multiple <highcharts-chart> components are rendered at the same time, each schedules its initialization as a separate Promise. As a result, N parallel tasks hit the main thread simultaneously, which can negatively impact initial rendering performance when many complex charts are created at once.

Workaround:
Instead of rendering all charts at once, stagger their initialization using native browser/Angular APIs such as setTimeout with incremental delay or Angular's @defer block to spread the rendering over time and avoid parallel initialization.

Fix:
We could introduce an internal queue mechanism that serializes chart initialization. This would ensure charts are created in a controlled, sequential manner rather than all at once, restoring behavior closer to v4.x while keeping the current architecture.
Any thought @PowerKiKi, @medbenmakhlouf?

[PowerKiKi]

It's unclear to me why we use setTimeout() at all. I would rather attempt to remove the need for that, possibly leveraging Angular's afterNextRender() if needed, rather that add more complexity. But since I don't really understand the purpose of the setTimeout() in the first place, I am not sure it's even possible...

[alexlehner86]

Hi team,

I also recenctly encountered this performance bug in a project where I updated to highcharts-angular v5. Any update regarding this issue?