Black Lives Matter. Please consider donating to Black Girls Code today.

Bar or fill aera with top as spline

Hi,

I try to draw some bars with not horizontal top but spline top.
If I do a fill: ‘tonexty’,line: {shape: ‘hv’, width: 1} I have the vertical shape like bars but also the top behave like a bar.

Is there a way to have bar behavior (sometime nothing, sometimes some values) but with a curve on the top ?
On this image, I would like the yellow aera to match the blue curve instead of creating steps like this.

plot|690x284

Thanks

A solution may be to set the same trace as blue one with fill aera, but disable its visibility at some frames.

But don’t know if it possible

Ok, if I add value or null, the curve is traced or not. Nice

But, with fill: ‘tozeroy’, as soon as there a value, the fill aera take previous valid data instead of null and never disable…
Dunno if it is a bug or a feature, but in this case this is really annoying

var trace = {
x: [1, 2, 3, 4],
y: [16, null, 11, 9],
type: ‘scatter’,
fill: ‘tozeroy’
};

var data = [trace];
Plotly.newPlot(‘myDiv’, data)

nullfill

@kiboost I’m having problems following this thread.

Did you find a solution to your problem?

Sorry, but no, it seems a plotly bug with fill.

In my previous post, the curve is cut when using a null value. This is right.

But, the area represented by the fill isn’t cut. At x=3 there is no=null value. The aera should trace vertically down at x=2 and come vertically up at x=4 when a new valid value is there. Instead of that, it goes traight to next valid value and don’t cut the area.

I’ve tried all sort of things but end up with two results:

  • valid aera with bar, shape=‘hv’ etc but the top isn’t a curve but horizontal steps.
  • valid curve/shapes, but wrong fill aera

Here is mockup of what I try to achieve:
test