Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Invisible plot lines with WebGL (scattergl) in prod mode

See original GitHub issue

I’m trying to draw standard plots with WebGL but the lines remain invisible 😦 The data is loaded correctly, as you can see the values when hovering on the points, so it seems to be a problem of rendering for the lines. Note the markers (X) are correctly shown.


For WebGL i’m using data.type="scattergl" instead of the usual scatter. The reason is i have several hundreds of thousands of points to visualize and it’s way faster with WebGL. Note the problem also occurs if i load very little data. However if i plot with scatter it works fine! So the code should be good.

I’m using Angular with the standard plotly wrapper so i opened a ticket there as well but i can’t tell yet where the bug is. Also note if i build my angular app in dev mode, i.e. without build optimization, it works! So it’s the combination of scattergl + prod mode that fails. Any idea to explain this bug?

I’m sorry i can’t provide you an online code and seen it depends on the build mode it wouldn’t be relevant. But it may be something you’ve already seen such as this (but it was for react.js!) or maybe you can give me some tips.

Thank you in advance for any help.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

virgile-hogmancommented, Jan 14, 2019

Great news! The author of angular-plotly.js could fix it, see It was due to a double minimization of plotly.js when bundling the Angular application in prod mode. It is solved in angular-plotly.js 1.0.0, this issue can be closed.

virgile-hogmancommented, Jan 15, 2019

Another good news, another issue i had when hovering on plots is now solved! This problem appeared with a fully optimized bundle, consisting of two parameters: optimization (minimizer) + buildOptimizer (tree shaking), which are enabled by default in prod mode, at least with Angular 7. I had to turn the buildOptimizer off to make the application work (more info here), but now i can also enable it again and i’m convinced the solution came with the last fix on angular-plotly.js. At least it’s the most rational explanation, as the double minimization created some issues. Now i have a fully optimized bundle, so that’s great! 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-plotly: plot lines are invisible with WebGL (scattergl)
The reason for using scattergl is that I have a big set of data points to display in the production. Can anyone please...
Read more >
plotly.graph_objects.Scattergl — 5.11.0 documentation
Construct a new Scattergl object. The data visualized as scatter point or lines is set in x and y using the WebGL plotting...
Read more >
Plotly - Quick Guide - Tutorialspoint
Plotly you can implement WebGL with Scattergl() in place of Scatter() for increased speed, improved interactivity, and the ability to plot even more...
Read more > · 骑士救兵/plotly-py -
trendline traces are now of type scattergl when render_mode="webgl" in Plotly ... The line_3d plotly express function was not visible by default when ......
Read more >
The most insightful stories about graphs | Data Science Dojo
Supercharge your Python plots with zero extra code! Graphs play a very important role in the data science workflow. Learn how to create...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found