# Filling between two specific lines?

**URL:** <https://community.plotly.com/t/filling-between-two-specific-lines/81852>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [January 26, 2024, 10:41am UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852 "2024-01-26T10:41:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![avimuni](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@avimuni](https://community.plotly.com/u/avimuni)\
**Post date:** [January 26, 2024, 10:41am UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852/1 "2024-01-26T10:41:25Z")

</div>

In a plot with several traces, i’m trying to fill the areas between two lines **that i choose**.  
The desires effect, achieved with matplotlib.pyplot looks like this:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/9/b9d796f519a5d02fd3eca11e66433bfdb6bdb257.png)

where the cyan and orange areas are filled between their respective trends, and up/down to the red line. The black line is unrelated to those filled areas, but should be plotted along with the blue line regardless.

Plotly has the following function:

```auto
plt.fill_between(x, y1, y2, color, alpha)

```

I tried achieving this with Plotly’s `fill: 'tonexty'`, but this doesn’t work out well because of the black traces.

I’d love to hear of a solution / workaround for this.

Thanks!

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 26, 2024, 11:04am UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852/2 "2024-01-26T11:04:06Z")

</div>

HI @avimuni could you provide the data for this example you’re showing?

---

<div class="post-metadata">

**Author:** ![avimuni](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@avimuni](https://community.plotly.com/u/avimuni)\
**Post date:** [January 31, 2024, 11:18am UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852/4 "2024-01-31T11:18:02Z")

</div>

can also be easily reproduced with this example:

```auto
from matplotlib import pyplot as plt
import numpy as np
import pandas as pd

series1 = pd.Series(np.random.randn(100), index=pd.date_range('1/1/2000', periods=100))

series2 = series1 + np.random.randn(len(series1))

positive_contribution = series2 + 0.5
negative_contribution = series2 - 0.5

plt.plot(series1, color='black')
plt.plot(series2, color='red')
plt.fill_between(series2.index, series2, negative_contribution, color='cyan', alpha=0.2)
plt.fill_between(series2.index, series2, positive_contribution, color='orange', alpha=0.2)

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 31, 2024, 11:31am UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852/5 "2024-01-31T11:31:39Z")

</div>

> [@avimuni](#):
>
> can also be easily reproduced with this example:

Unfortunately not: `name 'ts' is not defined`

---

<div class="post-metadata">

**Author:** ![avimuni](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@avimuni](https://community.plotly.com/u/avimuni)\
**Post date:** [January 31, 2024, 4:24pm UTC](https://community.plotly.com/t/filling-between-two-specific-lines/81852/7 "2024-01-31T16:24:46Z")

</div>

Found the answer elsewhere:

Apparently “tonexty” actually fill the space between the current trace and the trace that was previously added in the ‘trace storage’, and **not** to the ‘nearest’ trace. This means that the order in which the traces are added to the figure is the main factor in determining between which trends the fill happens.

A workaround can therefore be:

```auto
# add a transparent 'red' trace not visible on legend.
fig.add_trace(
    go.Scatter(
        x=series2.index,
        y=series2,
        fill=None,
        mode="lines",
        line_color="rgba(0,0,0,0)",
        showlegend=False,
    )
)
# add orange trace
fig.add_trace(
    go.Scatter(
        x=series2.index,
        y=positive_contribution,
        fill="tonexty",
        mode="lines",
        line_color="orange",
    )
)
# re add the red trace, but visible this time, as this is the last one
fig.add_trace(
    go.Scatter(
        x=series2.index,
        y=series2,
        fill=None,
        mode="lines",
        line_color="red",
    )
)
# add the cyan trace
fig.add_trace(
    go.Scatter(
        x=series2.index,
        y=negative_contribution,
        fill="tonexty",
        mode="lines",
        line_color="cyan",
    )
)
# finally add the black trace
fig.add_trace(
    go.Scatter(
        x=series1.index,
        y=series1,
        fill=None,
        mode="lines",
        line_color="black",
    )
)

```