Scattergl with HSL colors is off

[tishihar94]

Hello,

It seems like markers for Scattergl plots are much more blurrier than Scatter plots.

Scatter:

Scattergl (same parameters):

Also, in Scattergl, it seems like the markers don't display the proper color while the hover label does:

Is this just a characteristic of WebGL?

[etpinard]

Those sound like bugs to me. Unfortunately, it is very hard for us (and for any library maintainer out there) to debug from screenshots.

So, would you mind sharing a reproducible example of the graphs you made? Furthermore, would you mind telling us what browser and OS you're using?

Thank you.

[tishihar94]

Hi @etpinard,

Thank you for the quick reply.
I created a JSFiddle where you can observe the bug where Scattergl incorrectly colors the markers while the hover label remains correct (change var plotType to "scatter" or "scattergl"). However, I could not recreate the blurriness caused by Scattergl for some reason.
JSFiddle

I am running a Flask app that uses python to generate the traces and dumps into JSON format which is then plotted via Plotly.js's newPlot() function.

The server I am running the app off of runs on Ubuntu 14.04.5 LTS (GNU/Linux 3.13.0-139-generic x86_64).

I am using Plotly.py version 2.4.1 and Plotly.js version 1.34.0

[etpinard]

Ho I see, you're using hsl colors. Looks like we aren't supporting that correctly in scattergl. Thanks very much for the report!

In the meantime, by switching to hex or rgba colors, you'll get a match between scatter and scattergl.

[jzthree]

@etpinard I had the same blurry problem for scattergl. The JSFiddle @tishihar94 provided actually looks blurry in my browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit), Mac OS Sierra 10.12.6 (16G1036), and I am using a macbook pro retina if that helps).

I tried to look up online and it seems that most of the WebGL blurry problems were related to creating the image at a different size and getting stretched by css. I have never seen the blurry problem with scatter3d.

Not sure if this is related, in the case of my plot, before the plot is completely loaded (I am using Dash, but this seems to be not specific to Dash as this pen example has the same problem), the axes and grids were temporarily displayed in a smaller size than the final plot size.

[etpinard]

probably another for @dy for next week (aka scattergl bug week).

[archmoj]

@tishihar94 @jzthree Would mind testing to see if this issue still a problem?

[deluksic]

I'm still seeing blurry scattergl on high dpi screens. (Google Chrome v75.0.3770.100, plotly-1.48.3)

[jbullock35]

Perhaps there is a connection here to #3246. In any case, the problem of blurry scattergl plots extends beyond high-DPI screens, stretching of the canvas (per @jzthree), or high-DPI screens. In addition to #3246, https://stackoverflow.com/questions/62498783/plotly-webgl-plots-are-fuzzy-blurry has some information that may be relevant.

[twitwi]

I observed the hsl issue too: I could not go beyond blue, i.e. beyond 255) and tracked it to the color-rgba dependency that has fixed it some time ago.

colorjs/color-rgba@22c92af

Optimistically, updating the dependency should solve the problem.

[Lexachoc]

@twitwi Thank you very much. I spent so long trying to figure it out what's wrong with the colors and I found this bug too!

I can confirm that the problem with the HSL value above 255 is fixed by updating color-rgba to 3.0.0.