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

Filling, above and below

The following plot adds filling below. But, how do I add filling above the same line?

fig = go.FigureWidget()
fig.add_scatter(x=xs, y=np.sin(xs)+xs, fill='tozeroy')
fig.layout = dict(xaxis={'linecolor': 'black', 'mirror': True},
                        yaxis={'linecolor': 'black', 'mirror': True},

Also, the lower x-axis appears to be slightly thicker. Not something I would expect.

I can add another line and do fill='tozerox', but that distorts the plot.
Also, why is it that when I add another line/trace the x and y axes are no longer anchored at zero?

Hi @ursus,

You can add a fill between two lines (rather than between a line and the x/y axis) by fill='tonexty'. See

Is your lower x-axis right on y=0? Maybe it looks thicker because the axis zero line is right on top of the border. You can turn off the axis zero lines with

fig.layout.xaxis.zeroline = False
fig.layout.yaxis.zeroline = False

If you want to force auto-ranging to include zero, you can set

fig.layout.yaxis.rangemode = 'tozero'

Hope that helps,

Thank you for the help, Jon.

This is the plot Iā€™m after:

Following you suggestion, this is how I achieve it:

xs = np.arange(10)
fig = go.FigureWidget()
fig.add_scatter(x=xs, y=np.sin(xs)+xs, fill='tozeroy')
fig.add_scatter(x=xs[[0,-1]], y=[11,11], fill='tonexty')
fig.layout = dict(xaxis=dict(linecolor='black', mirror=True),
                  yaxis=dict(zeroline=False, linecolor='black', mirror=True, range=[0,10]),
                  height=600, showlegend=False

Added a new line and the range argument to yaxis.
Not sure that is the most elegant way though.

1 Like