Fill doesnt work when curves are of type scattergl

[53r1k]

When the type of 2 curves is "scattergl" and there is a fill betweem them, it doesnt work.

Here is a reproducible, minimized codepen: https://codepen.io/GoldBlacky/pen/yyLgOdd

I would also be very happy about a workaround or general direction to try to implement a workaround myself. The reason I need scattergl is because my application is too laggy when using scatter with multiple thousand data points.

Thanks!

[53r1k]

Found a workaround by enclosing the space between the two curves I want to fill in a polygon:

const xPolygon = xValues.concat(xValues.reverse());
const yPolygon = yMax.concat(yMin.reverse());

then for the plotly data, providing this polygon data and filling toself:
x: xPolygon,
y: yPolygon,
type: "scattergl",
mode: "lines",
fill: "toself",
fillcolor: "rgba(0, 0, 0, 0.14)",

[gvwilson]

Thanks @53r1k - glad you found a workaround. Realistically, I don't think we're going to be able to get to this one any time soon, but we'd be happy to prioritize review if you are interested in preparing a PR. Thanks - @gvwilson

[53r1k]

I'm currently looking into the issue, and I managed to identify the problem. Thankfully it isn't webgl itself, just the logic about linking curves to each other isn't quite correct in the scattergl implementation. I was able to fix the issue I was experiencing by adjusting how the curves are linked, but it's a bit too hacky to PR right now. Any way, In the process of doing that, I also realized that the scattergl implementation of the fill also doesn't quite work with "toself", when the resulting shape is twisted (lines intersect), this can be tested with this PlotData for example:

{
"x": [1, 2, 3, 4, 4, 3, 2, 1],
"y": [3, 5, 1, 7, 5, 3, 2, 0],
"fill": "toself",
"type": "scattergl"
}

Since regular scatter has a fundamentally different implementation, it works there without a problem. So if you change the type to "scatter", it works fine.

Im not exactly sure, are interesecting lines supposed to be supported with fills like tonexty or toself?

[53r1k]

For reference, this is what I mean with twisted shapes being drawn incorrectly by scattegl, the result of:
{
"x": [1, 2, 3, 4, 4, 3, 2, 1],
"y": [3, 5, 1, 7, 5, 3, 2, 0],
"fill": "toself",
"type": "scattergl"
}
gives us:

Changing the type to scatter results in this image: