Bug reportOct 22, 2026· 0:27· 9 views
Plotly.js 4.x: fill:'tozeroy' with null gap paints across the break instead of stopping
0:27 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumScatter trace fill rendering (fill:'tozeroy' path construction): null/gap handling should split fill polygons the same way line segments are split.
os: macOSdpr: 1locale: en-USbrowser: Chromium 151.0.7922.34library: Plotly.js 4.1.2 (subtitle says loaded from cdn.plot.ly)timezone: Europe/Berlinviewport: 1280x720page_title: Plotly.js — fill tozeroy null-gap bug (issue #2736)
Repro steps
- 1.Open the test page that renders two side-by-side Plotly.js 4.1.2 charts using fill:'tozeroy'.
- 2.Look at the left control chart. It has y=2 at x=0,1,2,3,4 with no nulls.
- 3.Look at the right chart. It uses the same data except y is null at x=2.
- 4.Compare the fill region under the line between x=1 and x=3 on the right chart once rendering finishes.
Expected
In the right chart the line breaks at the null at x=2. The tozeroy fill should break too, leaving no fill between x=1 and x=3. The fill should cover only the segments x=0 to 1 and x=3 to 4.
Actual
The red line correctly breaks between x=1 and x=3. The pink fill still spans the whole gap from x=1 to x=3 down to y=0, so the null gap is painted as if data were present. The left control chart, which has no nulls, fills correctly from x=0 to x=4.
Evidence
visualRight chart labeled 'Bug — null at x=2 (fill spans the gap)' shows red points at x=0, 1, 3 and 4. The line is broken between x=1 and x=3, but the pink fill continues across that range to y=0.
visualAfter gridlines finish rendering, the right chart still shows continuous pink fill across x=1 to x=3 under the broken line.
visualControl: the left chart labeled 'Control — no nulls (fills correctly)' shows a blue line at y=2 with points at every integer x, filled correctly from x=0 to x=4. This case works as expected.
visualThe page stays static with no interaction. The right chart's fill still spans the null gap, so the bug persists.
consoleA warning reports that the parser-blocking cross site script https://cdn.jsdelivr.net/npm/plotly.js@4/dist/plotly.min.js was invoked via document.write. This conflicts with the subtitle, which says the library was loaded from cdn.plot.ly. It is unrelated to the fill bug but worth noting for the build source.
Issue markdown (copy-paste ready)
## Summary With `fill:'tozeroy'`, a null y value breaks the line but does not break the fill. The fill area is painted across the gap down to y=0. ## Environment - Plotly.js 4.1.2 (page subtitle: loaded from cdn.plot.ly) - Chromium 151.0.7922.34, macOS - Viewport 1280x720, dpr 1 ## Steps to reproduce 1. Render a scatter trace with `fill:'tozeroy'`, x = [0,1,2,3,4], y = [2,2,null,2,2]. (1.0s) 2. As a control, render the same trace with y = [2,2,2,2,2]. (1.0s) 3. Wait for rendering to finish and compare the fill between x=1 and x=3. (3.0s) ## Expected The fill breaks at the null, the same way the line does. There should be no fill between x=1 and x=3. ## Actual The line breaks between x=1 and x=3, but the pink fill spans the full gap down to y=0. Visible from 1.0s and unchanged through 23.0s. ## Control The left chart, with no nulls, fills correctly from x=0 to x=4 (3.0s). It works as expected. ## Evidence - 1.0s: the right chart shows the broken red line with continuous pink fill across the null gap. - 3.0s: after gridlines render, the fill still spans x=1 to x=3. The control chart is correct. - 23.0s: there is no change and the bug persists. - 0s console warning: parser-blocking cross site script `https://cdn.jsdelivr.net/npm/plotly.js@4/dist/plotly.min.js` invoked via document.write. This does not match the subtitle's cdn.plot.ly source, so check which build is actually loaded. ## Suggested area The scatter fill path construction for `tozeroy`. Gap handling for nulls should split the fill polygon into segments, matching how line segments are split. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →