# Line chart fill behaviour

**URL:** <https://community.plotly.com/t/line-chart-fill-behaviour/23615>\
**Category:** 📊 Plotly Python\
**Created:** [May 19, 2019, 2:12pm UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615 "2019-05-19T14:12:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [May 19, 2019, 2:12pm UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615/1 "2019-05-19T14:12:09Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/b8ff2d3689257d3faf9e3434f7dbe362dd3bf304.png)

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

---

<div class="post-metadata">

**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\
**Post date:** [May 19, 2019, 11:38pm UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615/2 "2019-05-19T23:38:21Z")

</div>

Move this to the plotly **python** part of the community for better answers. 👍 [https://community.plotly.com/c/api/python](https://community.plotly.com/c/api/python)

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [May 21, 2019, 10:00am UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615/3 "2019-05-21T10:00:14Z")

</div>

Hi @Chris369,

Here’s an approach using three traces.

```python
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/44759a14e82832e8eccece7a293d0b192d2897fd.png)

Hope that helps!  
-Jon

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [May 21, 2019, 5:03pm UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615/4 "2019-05-21T17:03:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [May 22, 2019, 10:54am UTC](https://community.plotly.com/t/line-chart-fill-behaviour/23615/5 "2019-05-22T10:54:45Z")

</div>

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](https://github.com/plotly/plotly.js/issues)) to discuss this as a new fill mode.

-Jon