Repository navigation
Scattergl with HSL colors is off #2431
Description
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?
Activity
etpinard commentedon Mar 2, 2018
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 commentedon Mar 2, 2018
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 plotTypeto"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 commentedon Mar 2, 2018
Ho I see, you're using
hslcolors. Looks like we aren't supporting that correctly inscattergl. Thanks very much for the report!In the meantime, by switching to
hexorrgbacolors, you'll get a match betweenscatterandscattergl.[-]Scattergl blurry/low resolution[/-][+]Scattergl with hsl colors is off[/+]jzthree commentedon Mar 12, 2018
@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 commentedon Apr 13, 2018
probably another for @dy for next week (aka scattergl bug week).
archmoj commentedon Apr 9, 2019
@tishihar94 @jzthree Would mind testing to see if this issue still a problem?
deluksic commentedon Jul 21, 2019
I'm still seeing blurry scattergl on high dpi screens. (Google Chrome v75.0.3770.100, plotly-1.48.3)
jbullock35 commentedon Jun 26, 2020
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 commentedon Sep 8, 2023
I observed the
hslissue 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.
[-]Scattergl with hsl colors is off[/-][+]Scattergl with HSL colors is off[/+]Lexachoc commentedon Jan 4, 2025
@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.camdecoster commentedon Apr 21, 2026
Fixed in #7325.