Performance issue with several scattergl subplots

plotly.js
1

I need to display about 20 line charts with data being streamed from a socket and updated every 50ms.
Each trace has 10.000 data points.
The lines restart from the left when reaching the end of the window, so the whole trace needs to be updated (and not just extended).

I’ve tried using different plots but quickly ran into the webgl context limit.
I switched to drawing subplots on the same plot, but after about 3 subplots, performance becomes an issue: refresh rate drops, updates hang, then complete at once.

Is there any technique to make these trace updates more fluid ?

2

See https://github.com/plotly/plotly.js/issues/2333#issuecomment-363143357

3

Thanks @etienne . I did see that issue. However, I am using only 1 Plot with 20 subplots (for that exact reason, ie: webgl context limit)

4

Ok - could you share a reproducible example to help us help you?

5

Here is a quick and dirty example with 10 lines, each containing 30.000 data points.
About half way through, chrome starts to take over 100% cpu and the restyle method takes exponentially longer.
One thing I notice is that some svg elements are continuously updated while not being used.

https://codepen.io/jerokh/pen/vYBepXV

6

@etienne do you think there is any hope of achieiving this with plotly or am I doomed to write raw webgl ?