Plotly.js: Incorrect fill rendering caused by gaps in data

[acarapetis]

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.

[alexcjohnson]

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]

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 many nulls, one series starts with many nulls.

Effect as shown below:

[nickrussler]

I encountered a similar problem and as @acarapetis mentioned adding fill: 'tozeroy' to the bottom trace mitigated the problem for me in combination with fillcolor: '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]

Any update on this issue in the meantime?

I encountered a similar problem and as @acarapetis mentioned adding fill: 'tozeroy' to the bottom trace mitigated the problem for me in combination with fillcolor: 'transparent' for the bottom trace. Also mapping the null values to some very small number (-99999999) to "pinch" the area off worked for me.

The workaround above does somehow mitigate the problem. However, the gaps are also filled:

Any idea on how to avoid that?