Plotly SVG-to-WebGL trace migration threshold for growing datasets

Answer

Likely explanation

Based on typical Plotly.js performance, SVG scatter rendering begins to exceed the 200 ms latency budget around 3 000–5 000 points on a mid‑range laptop, while scattergl stays under the budget up to at least 15 000 points.

Confirmed facts from research

• Plotly.react can change trace.type from 'scatter' to 'scattergl' and call Plotly.react in‑place; layout annotations are preserved because they belong to the layout, not the trace.
• Dash‑pattern settings (line.dash) are retained, but scattergl may render some dash styles differently across browsers.
• SVG traces create a DOM node per point, leading to higher heap usage; scattergl uses WebGL buffers, resulting in a lower memory footprint. After serializing the figure to JSON and rehydrating, the data payload is identical, but runtime memory is lower for scattergl.

Steps for this case

1. Measure initial render and pan/zoom latency with performance.now() at the current point count and projected 15 k points using a mid‑range laptop (e.g., Chrome on Intel i5‑8250U).
2. If latency exceeds 200 ms, update each scatter trace: trace.type = 'scattergl'; then call Plotly.react(gd, fig) where gd is the div and fig is the updated figure object.
3. Verify that annotations (layout.annotations) appear unchanged and inspect dash‑pattern rendering; if exact dash fidelity is required, note which patterns you use (see missing detail below).
4. Ensure the figure is serialized to localStorage after any update and rehydrated with Plotly.react; the JSON payload stays the same, but post‑render heap usage will be lower for scattergl.

Missing diagnostic detail

Please confirm which dash patterns (e.g., solid, dash, dot, dashdot) are required for your lines, as scattergl may render some patterns differently across browsers and could affect the recommendation to stay with SVG.