Line chart fill behaviour

📊 Plotly Python
1

Hi

In this chart, is it possible to fill the area above the red line (shaded red) and also the area below the green line (shaded green) using standard Plotly parameters?

Anything between the two lines shouldn’t be shaded at all.

33
Screenshot 2019-05-19 at 15.08.33.png2318×770 82.2 KB

I’ve tried various combinations of fill=‘tonexty’ on each of the traces, and played around with the trace order but not getting the effect I need

Thanks

Chris

2

Move this to the plotly python part of the community for better answers. :+1: https://community.plotly.com/c/api/python

3

Hi @Chris369,

Here’s an approach using three traces.

from plotly.offline import init_notebook_mode, iplot
import plotly.graph_objs as go
import plotly.io as pio

# # For classic notebook
# init_notebook_mode()

fig = go.Figure(data = [
    go.Scatter(y=[1, 3, 2], mode='lines', fill='tozeroy', line={'color': 'green'}),
    go.Scatter(y=[2, 5, 3], mode='lines', line={'color': 'red'}, showlegend=False),
    go.Scatter(y=[8, 8, 8], mode='lines', fill='tonexty', line={'color': 'red'})
])
iplot(fig)

newplot-44
newplot-44.png700×450 10.8 KB

Hope that helps!
-Jon

4

Thanks for the reply. Apologies but I’ve realised I wasn’t very clear - my bad. I want the area above the red line that is also below the yellow line to be red (so only 4 sections in my screenshot). Likewise, the area below the green line but above the yellow line (3 sections). Is that possible?

5

Hi @Chris369,

Hmm, unfortunately I don’t think there’s an easy way to do this, but it’s definitely an interesting idea. Feel free to raise an issue with the plotly.js project (https://github.com/plotly/plotly.js/issues) to discuss this as a new fill mode.

-Jon