Fill area upper to lower bound in continuous error bars


#1

Hi everyone,

I鈥檓 trying to plot a stock price chart with upper and lower bound, and would like to fill the area in grey between
upper and lower.

I only want to fill it between upper and lower bound, with no overlaps which darkens the color.
However it seems I鈥檓 keep getting the fill parameters wrong.

I would really appreciate for advice here :slight_smile:

I鈥檓 attaching the code, and the output below.

Thank you in advance !

def plot_volatility(dataframe, filename):
    """
    Interactive plotting for volatility
    
    input: 
    dataframe: Dataframe with upperbound, lowerbound, moving average, close.
    filename: Plot is saved as html file. Assign a name for the file.
    
    output:
    Interactive plotly plot and html file
    """
    
    upper_bound = go.Scatter(
        name='Upper Bound',
        x=dataframe['date'],
        y=dataframe['upper_band'] ,
        mode='lines',
        line=dict(width=0.5,
                 color="rgb(255, 188, 0)"),
        fillcolor='rgba(68, 68, 68, 0.1)',
        fill='toself')
    
    trace1 = go.Scatter(
        name='Close',
        x=dataframe['date'],
        y=dataframe['Close'],
        mode='lines',
        line=dict(color='rgb(31, 119, 180)'),
        fillcolor='rgba(68, 68, 68, 0.2)',
        fill='tonexty')
    
    trace2 = go.Scatter(
        name='Moving Avg',
        x=dataframe['date'],
        y=dataframe['moving_avg'],
        mode='lines',
        line=dict(color='rgb(246, 23, 26)'),
        fillcolor='rgba(68, 68, 68, 0.2)',
        fill='tonexty')

    lower_bound = go.Scatter(
        name='Lower Bound',
        x=dataframe['date'],
        y=dataframe['lower_band'],
        mode='lines',
        line=dict(width=0.5, color="rgb(141, 196, 26)"),)

    data = [lower_bound, trace1, trace2, upper_bound]

    layout = go.Layout(
        yaxis=dict(title='Price'),
        title='Volatility Visualization',
        xaxis=dict(
            rangeselector=dict(
                buttons=list([
                    dict(count=1,
                         label='1m',
                         step='month',
                         stepmode='backward'),
                    dict(count=3,
                         label='3m',
                         step='month',
                         stepmode='backward'),
                    dict(count=6,
                         label='6m',
                         step='month',
                         stepmode='backward'),
                    dict(step='all')
                ])
            ),          
            rangeslider=dict(
                visible = True
            ),
            type='date'
        ),        
        showlegend = True)

    fig = go.Figure(data=data, layout=layout)
    return py.iplot(fig, filename=filename+'.html')

#2

[Update]

Solved the problem !

I played around with the order of traces.

I changed the data;
from [lower_bound, trace1, trace2, upper_bound]
to [lower_bound, upper_bound, trace1, trace2]

and now the output shows as below.