Scatter chart is heavy on newer Chrome version

[taketamu]

Expected behaviour

Scatter chart works fine with a about 1,000 data points on newer Chrome version.

Actual behaviour

Scatter chart drawing and scaling is heavy on the latest version of Google Chrome and Microsoft Edge.
Safari and Firefox has not this issue.
This issue occurs when drawing about 1,000 data points.
I noticed this issue on 7/26.

Live demo with steps to reproduce

https://jsfiddle.net/ps51q4wy/3/

Product version

highcharts version 9.0.1

Affected browser(s)

Google Chrome 92.0.4515.107（Official Build） （x86_64）

[khlieng]

It seems like Chrome 92 has some performance issues with some text-related SVG functions, heres the same demo without dataLabels: https://jsfiddle.net/8pa7tsw9/2/

https://support.google.com/chrome/thread/118284571/any-one-suffers-from-the-newest-ver-92-rendering-some-heavy-svg-jobs?hl=en

[taketamu]

Thanks!!
But, I want to use datalabels ...

[khlieng]

That demo was just to illustrate the problem :)

The Chrome regression will hopefully be fixed soon: https://bugs.chromium.org/p/chromium/issues/detail?id=1235045

[pawelfus]

Workarounds:

1. Set useHTML=true for all labels on the chart (Legend, Axes, DataLabels, Tooltip and others. Not all options are necessary, but I recommend setting at least the four mentioned above). If you use exporting module, don't forget to set exporting.allowHTML = true

2. Disable dataLabels. For my machine, the upper limit is around 300 labels to render the chart in a reasonable time.

3. Set dataLabels.rotation = 0.0001 (internally, Renderer will use text() constructor instead of label(). text() is unaffected).

Internal note:
Edit: Standalone demo: https://jsfiddle.net/BlackLabel/pxLynhks/

[pawelfus]

Update:
Chrome Canary v94.0.4598.0 renders demos in ~100-200ms (like it used to)

[taketamu]

@pawelfus
Thanks!!
I wait for v94 to be stable.