Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Fill between a chart based on boolean values in a Pandas dataframe

Hi all,

New to plotly after using matplotlib for a while- really impressed with the cool, easy to use data visualization methods! I have a quick question on fill between plots

Basically, I have a pandas dataframe that contains dates, columns with values, and then a last column with values 0 or 1. All I want to do is shade entire areas on the X axis based on whether the values are 0 or 1 for that day. When using matplotlib, I used to just use ax.fillbetween(x['date'], -1,1,where= df['bool'] == 0)

Appreciate the help on this! Can’t seem to find any documentation and am not sure how many fill functions there are.

Hi @ronenshohat,
You can shade the areas corresponding to 0, and 1, plotting rectangular shapes:,

you’re talking about this right?

Thanks for the help. For layout do I have to assign dictionaries? I don’t seem to understand a way to syntax it so it highlights a select color on certain days, seems like I can only highlight for time periods and would have to loop through my entire dataset…

In other words, instead of having to loop through and finding multiple values for x0 and x1 would I be able to just plot multiple x1s or something? or insert a where clause like in matplotlib?

@ronenshohat Could you be more precise, in describing what do you want to shade, please? And give an explicit description of your ideas to plot shades. I don’t understand what are you saying by “would I be able to just plot multiple x1s or something

do here’s a sample df:

date val1 val2 val3 heating
1/1/2016 1 3 5 0
1/2/2016 2 4 6 1
1/3/2016 3 2 1 0

I want to plot the dates on x, val1-3 on y, then shade grey for dates 1/1/2016 and 1/3/2016 because their values are 0 for heating. Does this make sense?

Could you please post a png generated with matplotlib to see effectively what do you mean by shading particular dates. Then I could suggest what is equivalent of that shading in Plotly.

This is exactly what I suggested before: you should insert shapes in layout definition, and set color grey for their boundary lines.

How would you approach this then if you had a table with 3 years of dates and dozens of shaded areas? I clearly stated the problem, not sure where we don’t understand each other- that syntax requires me to use a date range for each period. This means I’m going to have to run a loop to design custom periods for this, instead of having a method where I can just shade regions based on values. Does that make sense?

At the moment such a function does not exist. I’m sorry.

so there’s no sort of fill between function? That doesn’t make sense at all to me


So I managed to write the for loop to get this to work. Just in case anyone is interested or this shows up in a google search:

for index, row in useperftable.iterrows():
if row['column'] == 0:
    thisdict = {
        'type': 'rect',
        # x-reference is assigned to the x-values
        'xref': 'x',
        # y-reference is assigned to the plot paper [0,1]
        'yref': 'paper',
        'x0': str(index.normalize()),
        'y0': 0,
        'x1': str((index+timedelta(days=1)).normalize()),
        'y1': 1,
        'fillcolor': '#d3d3d3',
        'opacity': 0.2,
        'line': {
            'width': 0,

then you just add shapes: info