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 https://github.com/plotly/plotly.js/issues/3405 (but it was for react.js!) or maybe you can give me some tips.

Thank you in advance for any help.

Issue Analytics

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

Top GitHub Comments

1reaction

virgile-hogmancommented, Jan 14, 2019

Great news! The author of angular-plotly.js could fix it, see https://github.com/plotly/angular-plotly.js/issues/31. 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.

0reactions

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! 😃

Top 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...

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...

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...

CHANGELOG.md · 骑士救兵/plotly-py - Gitee.com

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 ......

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...