Plotly: How to set a fill color between two vertical lines?

Question

Using matplotlib, we can "trivially" fill the area between two vertical lines using fill_between() as in the example:

https://matplotlib.org/3.2.1/gallery/lines_bars_and_markers/fill_between_demo.html#selectively-marking-horizontal-regions-across-the-whole-axes

Using matplotlib, I can make what I need:

We have two signals, and I''m computing the rolling/moving Pearson's and Spearman's correlation. When the correlations go either below -0.5 or above 0.5, I want to shade the period (blue for Pearson's and orange for Spearman's). I also darken the weekends in gray in all plots.

However, I'm finding a hard time to accomplish the same using Plotly. And it will also be helpful to know how to do it between two horizontal lines.

Note that I'm using Plotly and Dash to speed up the visualization of several plots. Users asked for a more "dynamic type of thing." However, I'm not a GUI guy and cannot spend time on this, although I need to feed them with initial results.

BTW, I tried Bokeh in the past, and I gave up for some reason I cannot remember. Plotly looks good since I can use either from Python or R, which are my main development tools.

Thanks,

Carlos

Derek O · Answer 1 · 2020-09-08T15:56:03.437

I don't think there is any built-in Plotly method that that is equivalent to matplotlib's fill_between() method. However you can draw shapes so a possible workaround is to draw a grey rectangle and set the the parameter layer="below" so that the signal is still visible. You can also set the coordinates of the rectangle outside of your axis range to ensure the rectangle extends to the edges of the plot.

You can fill the area in between horizontal lines by drawing a rectangle and setting the axes ranges in a similar manner.

import numpy as np
import plotly.graph_objects as go

x = np.arange(0, 4 * np.pi, 0.01)
y = np.sin(x)

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=x,
    y=y
))

# hard-code the axes
fig.update_xaxes(range=[0, 4 * np.pi])
fig.update_yaxes(range=[-1.2, 1.2])

# specify the corners of the rectangles
fig.update_layout(
    shapes=[
    dict(
        type="rect",
        xref="x",
        yref="y",
        x0="4",
        y0="-1.3",
        x1="5",
        y1="1.3",
        fillcolor="lightgray",
        opacity=0.4,
        line_width=0,
        layer="below"
    ),
    dict(
        type="rect",
        xref="x",
        yref="y",
        x0="9",
        y0="-1.3",
        x1="10",
        y1="1.3",
        fillcolor="lightgray",
        opacity=0.4,
        line_width=0,
        layer="below"
    ),
    ]
)

fig.show()

Would [shapes](https://plotly.com/python/shapes/) (`type=‘rect’`) not be used for this? (Nice answer, just curious on the method choice). — S3DEV, Aug 19 '20 at 22:11
Oh that's probably easier, thanks for pointing that out. Updated my answer! — Derek O, Aug 19 '20 at 22:54
You can add `layer="below"` to draw the rectangles under the line — Harm, Sep 07 '20 at 19:41
@Harm te Molder That's a good suggestion, thank you! I've updated my answer — Derek O, Sep 08 '20 at 15:53

vestland · Answer 2 · 2020-10-05T20:12:50.080

You haven't provided a data sample so I'm going to use a synthetical time-series to show you how you can add a number of shapes with defined start and stop dates for several different categories using a custom function bgLevel

Two vertical lines with a fill between them very quickly turns into a rectangle. And rectangles can easily be added as shapes using fig.add_shape. The example below will show you how to find start and stop dates for periods given by a certain critera. In your case these criteria are whether or not the value of a variable is higher or lower than a certain level.

Using shapes instead of traces with fig.add_trace() will let you define the position with regards to plot layers using layer='below'. And the shapes outlines can easily be hidden using line=dict(color="rgba(0,0,0,0)).

Plot 1: Time series figure with random data:

Plot 2: Background is set to an opaque grey when A > 100 :

Plot 2: Background is also set to an opaque red when D < 60

Complete code:

import numpy as np
import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
import datetime

pd.set_option('display.max_rows', None)

# data sample
nperiods = 200
np.random.seed(123)
df = pd.DataFrame(np.random.randint(-10, 12, size=(nperiods, 4)),
                  columns=list('ABCD'))
datelist = pd.date_range(datetime.datetime(2020, 1, 1).strftime('%Y-%m-%d'),periods=nperiods).tolist()
df['dates'] = datelist 
df = df.set_index(['dates'])
df.index = pd.to_datetime(df.index)
df.iloc[0] = 0
df = df.cumsum().reset_index()

# function to set background color for a
# specified variable and a specified level



# plotly setup
fig = px.line(df, x='dates', y=df.columns[1:])
fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,255,0.1)')
fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,255,0.1)')

def bgLevels(fig, variable, level, mode, fillcolor, layer):
    """
    Set a specified color as background for given
    levels of a specified variable using a shape.
    
    Keyword arguments:
    ==================
    fig -- plotly figure
    variable -- column name in a pandas dataframe
    level -- int or float
    mode -- set threshold above or below
    fillcolor -- any color type that plotly can handle
    layer -- position of shape in plotly fiugre, like "below"
    
    """
    
    if mode == 'above':
        m = df[variable].gt(level)
    
    if mode == 'below':
        m = df[variable].lt(level)
        
    df1 = df[m].groupby((~m).cumsum())['dates'].agg(['first','last'])

    for index, row in df1.iterrows():
        #print(row['first'], row['last'])
        fig.add_shape(type="rect",
                        xref="x",
                        yref="paper",
                        x0=row['first'],
                        y0=0,
                        x1=row['last'],
                        y1=1,
                        line=dict(color="rgba(0,0,0,0)",width=3,),
                        fillcolor=fillcolor,
                        layer=layer) 
    return(fig)

fig = bgLevels(fig = fig, variable = 'A', level = 100, mode = 'above',
               fillcolor = 'rgba(100,100,100,0.2)', layer = 'below')

fig = bgLevels(fig = fig, variable = 'D', level = -60, mode = 'below',
               fillcolor = 'rgba(255,0,0,0.2)', layer = 'below')

fig.show()

Thanks, your solution also works, although it crosses all figures when using subplots. But it is good enough for me. — an_drade, Aug 20 '20 at 19:52
@an_drade Thanks for the feedback! Yeah, I hadn't taken the whole subplot thing into account. There are workarounds for that too though. Take a look [here](https://stackoverflow.com/questions/59214406/plotly-how-to-make-an-unbounded-vertical-line-in-a-subplot/59252121#59252121) for example. — vestland, Aug 20 '20 at 20:39

score 2 · Answer 3 · answered Apr 11 '22 at 16:38

2

I think that fig.add_hrect() and fig.add_vrect() are the simplest approaches to reproducing the MatPlotLib fill_between functionality in this case:

https://plotly.com/python/horizontal-vertical-shapes/

For your example, add_vrect() should do the trick.

answered Apr 11 '22 at 16:38

atkat12

3,840
7
22
22

1

This should be an accepted answer. – Grigorii Smirnov-Pinchukov Aug 02 '23 at 11:31
Indeed, this is the right way of doing it! Works like a charm. – Lucas Aug 06 '23 at 21:43

score 0 · Answer 4 · answered Aug 17 '23 at 09:41

You can use the add_vrect() function. Also, to automize you could put your periods into a dictionary and iterate over it.

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

df = pd.DataFrame({
    'DATE': pd.date_range('2023-01-01', '2023-07-31',freq='d')
})
df['VALUE'] = np.random.randint(low=-1, high=2, size=df.shape[0]).cumsum()

dct = {
    'Period 1': {
        'start_date': '2023-01-05',
        'end_date': '2023-02-20',
        'fillcolor': 'rgba(30, 180, 100, 0.2)',
        'linecolor': 'rgba(0,0,0,0)'
    },
    'Period 2': {
        'start_date': '2023-07-01',
        'end_date': '2023-07-16',
        'fillcolor': 'rgba(30, 180, 100, 0.2)',
        'linecolor': 'rgba(0,0,0,0)'
    },
    'Period 3': {
        'start_date': '2023-03-15',
        'end_date': '2023-03-25',
        'fillcolor': 'rgba(195, 105, 10, 0.2)',
        'linecolor': 'rgba(0,0,0,0)'
    },
}

fig = go.Figure()

for k, v in dct.items():
    fig.add_vrect(
        x0=v['start_date'],
        x1=v['end_date'],
        label=dict(
            text=k,
            textposition="top center",
            font=dict(size=20, family="Times New Roman")
        ),
        fillcolor=v['fillcolor'],
        opacity=0.75,
        line_width=0,
    )

fig.update_xaxes(showgrid=False)
fig.add_trace(go.Scatter(x=df['DATE'], y=df['VALUE'], line_color='blue', name='Value'))

fig.show()

Plotly: How to set a fill color between two vertical lines?

4 Answers4

Complete code:

Linked