✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Fill area between two lines

Hi,

How can I fill the area between 2 lines? In the documentation and examples all I see is filling from x=0 up to the line, but not between lines.

How can I do this?

Thank you for the help.

1 Like

Try using fill: 'tonexty' (example: https://plot.ly/javascript/filled-area-plots/#basic-overlaid-area-chart) or fill: 'tonextx'

1 Like

I have this problem too and ‘tonexty’ doesn’t solve it because I have many curves and I need to specify which one I fill to, not just the next one. Any tricks to make that possible? Similar to the uploaded image.

image

I got a little ways toward this goal…

I tried setting the background to white and then plotting the top with tozeroy, then adding the lower boundary and filing with white tozeroy, but when I add a second set the white fill to zero covers the first.

import plotly.graph_objects as go
import plotly.express as px


x = np.linspace(0, 10, 100)
y1 = 12 - 10 * np.exp(-0.9*x)
y2 = 10 - 10 * np.exp(-x)

y3 = 6  + 10 * np.exp(-x)
y4 = 5 + 10 * np.exp(-0.9*x) 


colors = px.colors.qualitative.Plotly

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y1, fill='tozeroy',  fillcolor=colors[0], line=dict(color=colors[0])))
fig.add_trace(go.Scatter(x=x, y=y2, fill='tozeroy', fillcolor='white', line=dict(color=colors[0]))) 

fig.add_trace(go.Scatter(x=x, y=y3, fill='tozeroy',  fillcolor=colors[1], line=dict(color=colors[1])))
fig.add_trace(go.Scatter(x=x, y=y4, fill='tozeroy', fillcolor='white', line=dict(color=colors[1]))) 

fig.update_layout(template="simple_white")
fig.show()

If you append the bottom curve from back to front to the top curve and use ‘toself’ you get the same as specifying the bottom curve seperately.

import plotly.graph_objects as go
import numpy as np
import pandas as pd
import seaborn as sns

gammas = sns.load_dataset("gammas")
summary_df = gammas.groupby(['timepoint', 'ROI']).describe().unstack()

fig = go.Figure()
for name in ['AG', 'IPS', 'V1']:
    y_upper = summary_df['BOLD signal', 'mean', name] + summary_df['BOLD signal', 'std', name]
    y_lower = summary_df['BOLD signal', 'mean', name] - summary_df['BOLD signal', 'std', name]
    fig.add_trace(go.Scatter(
        x=np.concatenate([summary_df.index, summary_df.index[::-1]]),
        y=pd.concat([y_upper, y_lower[::-1]]),
        fill='toself',
        hoveron='points',
        name=name
    ))

fig.show()