{{ message }}
Repository navigation
Incorrect fill rendering caused by gaps in data #2736
Description
I'm using Plotly.js to display some time series data with the following relevant properties:
- Large gaps in the data, and
- Non-symmetric uncertainty (i.e. each data point has min,avg,max values).
I'm attempting to plot this by adapting this example, but I seem to have come across a bug: when using data with gaps (and connectgaps: false) at the same time as fill: 'tonexty', the gaps cause the fill to be drawn incorrectly:
(The section of data at the very end of the graph is rendered correctly, but everything before the last gap is messed up.) For a simple example that reproduces this issue, see this codepen.
Interestingly, adding fill: 'tozeroy' to the bottom trace seems to resolve the obviously broken aspect of this issue:
I would still argue that the expected behaviour is that connectgaps: false should result in no fill crossing the gaps.
Activity
[-]Gaps in data break filled areas[/-][+]Incorrect fill rendering caused by gaps in data[/+]alexcjohnson commentedon Jun 14, 2018
Confirmed, thanks @acarapetis - and the pared-down codepen is much appreciated! Seems to be a problem specifically with gaps in the lower trace.
I'm probably going to need to muck with fills for #1217, perhaps I can fix this at the same time (along with the many other fill bugs)
yarl commentedon Jul 31, 2018
We have similar similar issue with two data series that should look like one, continuous data series. We use
fill: 'tozeroy', one series ends with manynulls, one series starts with manynulls.Effect as shown below:
nickrussler commentedon Nov 29, 2019
I encountered a similar problem and as @acarapetis mentioned adding
fill: 'tozeroy'to the bottom trace mitigated the problem for me in combination withfillcolor: 'transparent'for the bottom trace. Also mapping the null values to some very small number (-99999999) to "pinch" the area off worked for me.jhannink commentedon Apr 24, 2020
Any update on this issue in the meantime?
The workaround above does somehow mitigate the problem. However, the gaps are also filled:
Any idea on how to avoid that?
leoyala commentedon May 10, 2023
I was wondering if there is an update regarding this bug. I am still facing this issue in
plotly==5.14.1Noahkoole commentedon Dec 29, 2023
I am also having this issue still, any update on this?
Fix plotting confidence bands with gaps
Fix plotting confidence bands with gaps (#364)
Brax94 commentedon Feb 19, 2024
We are also experiencing this issue. The fill options does not respect gaps, and will fill across them.
We have been using a workaround for a while, which is basically to add a graph for each continuous part of the data.
Is anyone looking in on this?
faebebin commentedon Feb 28, 2024
Same problem here using
fill="tonexty"to fill between to lines with data gaps being unwillingly filled.Using plotly-python on plotly==5.18.0
wbeardall commentedon Apr 2, 2024
Is there any progress on this?
Apflkuacha commentedon Feb 5, 2025
Hmm, an open issue from 2018.. It also occures on simple data like it could be seen here, there are "null" measurements in between. The lines are printed correctly with the gaps but the filled area is connected:
I would expect this, the area is not drawn when there are no values (null) like the line which is not drawn
walkermchugh commentedon Oct 21, 2026
Related plotly.py report: plotly/plotly.py#5632
I reproduced the
tozeroygap withx: [0, 1, 2, 3, 4],y: [2, 2, null, 2, 2], andconnectgaps: false. The SVG scatter renderer separates the line segments, but joins them into one fill path. That path paints the missing span.I propose closing each valid segment against the zero axis as its own fill subpath for
tozeroyandtozerox.connectgaps: truewould retain one continuous fill. A review branch includes the code and a Jasmine regression test: walkermchugh/plotly.js@main...codex/fix-tozero-fill-gaps-5632. The existingscatter_fill_corner_casesimage mock covers gaps.This proposal covers SVG
scatterto-zero fills. It does not resolve thetonextyorscatterglcases in this broader issue. I will wait for human code review before opening a draft PR.camdecoster commentedon Oct 21, 2026
Thanks for looking into this. Our team will review your report and follow up.
scenerecap commentedon Oct 22, 2026
Still reproduces on Plotly.js 4.1.2 (cdn.jsdelivr.net, 2026-10-22, headless Chromium 151).
Steps:
x: [0,1,2,3,4],y: [2,2,null,2,2],fill: 'tozeroy',connectgaps: falsePlotly.newPlotExpected: fill area stops at each side of the null — two separate filled segments (indices 0–1 and 3–4).
Actual: the line correctly breaks at
x=2, but the SVG fill path continues across the gap as one closed region, painting the span fromx=1tox=3solid.A side-by-side control trace (
y: [2,2,2,2,2], no nulls) fills correctly toy=0.Recording of both traces rendered together: https://scenerecap.com/s/nwd1gul2xp