Filling two scatter traces without endpoints connection

[sandertar]

If one scatter trace doesn't completely enclose the other, then the endpoints of each trace will be connected with straight lines, and closed shape will be filled.
Are there any ways to fill each trace independently from other traces and close shape with vertical lines which perpendicular to xaxis?
http://codepen.io/sandertar/pen/YprYjm

[etpinard]

Thanks for the report.

Here's a workaround: http://codepen.io/etpinard/pen/RoLmdV

[etpinard]

By the way, your codepen uses a very very old version of plotly.js. You should try using

<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>

instead in the future.

[alexcjohnson]

FYI you're definitely right to consider this a bug @taranovalexander but there are several things that make this difficult to fix:

• What happens if the endpoint of trace 1 does not match a data point in trace 0 but rather between two data points? For straight line joins we can fairly easily find the intersection, but we will need to calculate it differently for each line.shape value (and 'spline' is particularly annoying)
• What if trace 0 is not monotonic in x? Which in fact can happen even if the trace0 x data is monotonic with line.shape='spline', but there are some truly horrible things that can happen if x is not monotonic.
• What if trace 1 starts before trace 0? Then we need to fill down to zero, then up the side of trace 0... and this gets even more convoluted if trace 1 starts after trace 0 as in your example, but then you add a trace 2 on top that starts before both of them.

One way we could think of solving this would be to draw these fills to zero but then clip them with the previous fills. That seems like it would give decent results - a bit weird looking in some of the non-monotonic cases but since those probably don't have much physical meaning we may not care.

But I hesitate to do that because I'd also like to solve the problem of stacked area charts - ie the filled-line analog of stacked bar charts, where we're not just filling between traces but actually adding them together. That requires knowing what the previous total is, which hits all the same issues but can't be solved by SVG machinery. It also adds another issue: if you go over a step between two points in the upper trace, the line needs to know to include this step. As a simple example, if you add: {x: [0, 10], y: [1, 1]} to {x: [5, 10], y: [5, 5]} - the upper trace should end up as x: [0, 10], y: [1, 6] but it needs to know not to draw a straight line between them (which would cut right through the lower trace!) but rather draw horizontally to (5, 1), then step up to (5, 6) and finish horizontally.

We could solve these issues in various ways - but however we handle #1205 it needs to take into account stacking.

[rreusser]

That's a good point about stacking, @alexcjohnson. If we want to support splines, the math would need to be done numerically since 2D splines would have to be converted to a function of one variable. If we don't take into account splines, then is it just a matter of inserting and interpolating points?

That part's not the worst (though the curve below has infinite slope at the two points), but yeah, the non-monotonicity issue is not straightforward. Frankly I think as long as it doesn't throw errors, we could get away with just about anything here and have a decent argument that it's reasonable behavior. The culprit here seems to be the interaction of one feature (allowing non-monotonicity) with another (stacked area) that don't really have any business together. Could we maybe even just drop any non-monotonic points?

[etpinard]

See https://codepen.io/etpinard/pen/ZXPEEP?editors=0010 (from https://community.plot.ly/t/continuous-error-bars-with-data-gaps/6388) for another example.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson