Blank Plots When Exceeding the Browser WebGL Context Limit with Plotly.js scattergl Charts

Answer the Core Question First

For most modern browsers (Chrome 120+, Edge 120+, Firefox 120+), the WebGL context limit is around 16. When you exceed this, Plotly.js silently discards the oldest contexts, causing scattergl charts to render blank. The practical way to decide whether to use scattergl is to benchmark at the point where GPU rendering outweighs SVG rendering – typically between 10,000 and 50,000 markers on a typical workstation. If your page hosts more than 5–6 scattergl charts, start counting contexts or monitor the console for the “Maximum number of WebGL contexts reached” warning.

Likely Explanation vs Confirmed Facts

Likely Explanation

• Scattergl becomes faster than SVG around 10k–50k points, but each trace consumes a WebGL context.
• When the browser’s context pool is exhausted, the oldest context gets destroyed, leaving the chart blank.
• Styling differences (e.g., non‑basic marker symbols, custom dash styles) are not supported in WebGL, so a switch can subtly change appearance.

Confirmed Facts (from research)

• Chrome DevTools’ Performance tab shows a spike in “WebGL draw calls” when rendering is the bottleneck.
• Console warning: Maximum number of WebGL contexts reached appears when the limit is hit.
• Plotly.js does not expose a public API to count contexts; a wrapper or runtime console inspection is required.
• Marker symbols like diamond-open or cross are unsupported in scattergl; a visual test chart can confirm supported styles.

Practical Steps for Your Dashboard

1. Benchmark Marker Count
   • Create a single scattergl trace with 5k, 10k, 20k, 40k markers.
   • Measure render time using performance.now() before and after adding the chart.
   • If time per point drops below 0.1 ms and CPU usage stays <10 %, you’re in the GPU‑dominated zone.
2. Detect Rendering Bottleneck
   • Open DevTools → Performance, record a session while adding a new chart.
   • Look for a long WebGL draw calls bar with minimal CPU activity; this indicates GPU work, not data processing.
3. Monitor Context Saturation
   • In the console, watch for the Maximum number of WebGL contexts reached message.
   • Alternatively, wrap Plotly.newPlot in a function that increments a counter each time a scattergl trace is created, and log the count.
   • When the counter approaches the browser’s documented limit (≈16), pause adding new scattergl charts and switch to scatter for the remaining ones.
4. Verify Styling Support
   • Render a test chart that plots every supported marker symbol (e.g., circle, square, diamond, diamond-open, cross, triangle-up, etc.) in a scattergl trace.
   • Compare the output to an SVG scatter trace; any missing or defaulted markers indicate unsupported styling in your bundled Plotly.js release.
   • Document the subset that works, and use it consistently across dashboards.

One Diagnostic Detail Needed

How many scattergl charts are you planning to render on a single page? If you’re already approaching the 5–6 chart threshold, consider pre‑loading one chart with a lower marker count or using a hybrid approach (scatter for the first few charts, scattergl for the rest).