Scattergl and px.line fill and continuous error bands don't appear

[maegul]

Summary

Using the fill and fillcolor parameters on scattergl traces (to produce continuous error bands, for example) does not work.

Issue

The issue is specific to scattergl traces: the same parameters work fine with scatter traces. To avoid the problem with plotly.express px.line() calls requires using render_mode="svg" to avoid the use of scattergl traces.

Using graph_objects has the some problem: one must use go.Scatter() and not go.Scattergl() to get error bands.

The reference for scattergl traces (https://plotly.com/python/reference/scattergl/#scattergl-fill) indicates that the behaviour should be the same as for scatter.

Specs

Python Version: 3.8.6
Plotly Version: 4.14.3
Kaleido Version: 0.2.1

• For image exports to be pasted here (they all looked the same as rendered in the browser)

Browsers: Firefox 88.0, Safari 12.1.1

Example

import numpy as np
import pandas as pd
import plotly.express as px

# dummy data
x = np.linspace(0, 10000, num=10_000)

df = pd.DataFrame({'x': x, 'y': x**2})
df['y_err_plus'] = df['y'] * 1.1
df['y_err_minus'] = df['y'] * 0.95

# use webgl and no fill

fig = (
px
 .line(
    df, x='x', y=['y', 'y_err_minus','y_err_plus'], 
    render_mode='webgl')
 .update_traces(
     fill='tonexty', fillcolor='red',
     selector={'name':'y_err_plus'}
 )
)
fig

# use svg to get fill

fig = (
px
 .line(
    df, x='x', y=['y', 'y_err_minus','y_err_plus'], 
    render_mode='svg')
 .update_traces(
     fill='tonexty', fillcolor='red',
     selector={'name':'y_err_plus'}
 )
)
fig

Sanity Check: fill to zero works?

Yes.

fig = (
px
.line(
    df, x='x', y='y', 
    render_mode='webgl')
.update_traces(fill='tozeroy')
)

fig

[nicolaskruchten]

Thanks for this bug report! Fills are indeed a problematic feature for scattergl and one of the places where parity between it and scatter break down :(

[maegul]

I figured! And I can definitely imagine!

[kvanderwijst]

So I did a little digging and it seems that in Scattergl, the fill='tonexty' breaks the next fill and the fill after that, then it becomes normal again. Weird!

fig = go.Figure()
fig.add_scattergl(y=[2,1,3], line_color="red", fill="tonexty")
fig.add_scattergl(y=[3,2,4], line_color="orange", fill="tonexty")
fig.add_scattergl(y=[10,11,9], line_color="yellow", fill="tonexty")
fig.add_scattergl(y=[11,12,10], line_color="green", fill="tonexty")
fig.add_scattergl(y=[14,16,14], line_color="blue")
fig.add_scattergl(y=[16,17,15], line_color="darkblue", fill="tonexty")
fig.add_scattergl(y=[19,18,16], line_color="purple", fill="tonexty")
fig.add_scattergl(y=[20,19,17], line_color="pink", fill="tonexty")

gives:

Maybe it helps.