plotly / plotly/plotly.js

Scattergl does not fill (`tonexty`) if another Scattergl trace is present

Open
#6,795 0 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

When attempting to fill the area between two lines using Scattergl, no filled area is showing up when another Scattergl trace is present before the two traces I'm trying to fill between. See the example below.

I'm not sure if this issue is related to some of the other issues posted about Scattergl and filling but none of those seem to mention the filled area not showing up, so I figured I'd post a new issue.

plotly version 5.18.0

Not working

This example shows what i mean:

import plotly.graph_objects as go
import numpy as np

upper_trace = go.Scattergl(
    x=np.arange(10),
    y=np.ones(10),
    mode="lines",
    line_color="blue",
    fill="tonexty",
    legendgroup="area",
)
lower_trace = go.Scattergl(
    x=np.arange(10),
    y=-np.ones(10),
    mode="lines",
    line_color="blue",
    fill="tonexty",
    legendgroup="area",
    showlegend=False,
)
other = go.Scattergl(
    x=np.arange(10),
    y=2 * np.ones(10),
    mode="lines+markers",
    line_color="red",
)

go.Figure([other, upper_trace, lower_trace])

Output:
image

Working
go.Figure([upper_trace, lower_trace, other])

image

Thanks in advance for taking a look.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the two Python examples with Plotly 5.18.0, focusing on the Scattergl traces and their ordering. Trace the Scattergl rendering path for fill="tonexty"; done means the filled area appears when another Scattergl trace precedes the two traces and remains correct when the order is changed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.