Colouring only specific area in line chart

📊 Plotly Python
1

Hi everyone,
I am really new to plotly and data science in general. For a demo of mine I wanted to make a visualization that looks like this but without the coloring of the area between Lower Boundary and Upper boundary (basically to have only the purple area part):

image
image1795×598 60 KB

Unfortunately that’s the closest I was able to get. The code I have is the following:

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(specs=[[{"secondary_y": True}]])

fig.add_trace(
    go.Scatter(x=df_3['Date'], y=df_3['arima_Pred'], mode='lines', name='ARIMA Prediction'),
    secondary_y=False,
)

fig.add_trace(
    go.Scatter(x=df_3['Date'], y=df_3['HeightDiff'], mode='lines', name='Height Difference'),
    secondary_y=True,
)

fig.add_trace(
    go.Scatter(x=df_3['Date'], y=df_3['lowerBoundary'], mode='lines', name='Lower Boundary', line=dict(dash='dot')),
    secondary_y=True,
)

fig.add_trace(
    go.Scatter(x=df_3['Date'], y=df_3['upperBoundary'], mode='lines', name='Upper Boundary', line=dict(dash='dot')),
    secondary_y=True,
)

fig.add_trace(go.Scatter(
    x=pd.concat([df_3['Date'], df_3['Date'][::-1]]),
    y=pd.concat([df_3['HeightDiff'], df_3['lowerBoundary'][::-1]]),
    fill='toself',
    fillcolor='rgba(255, 0, 0, 0.3)',
    line=dict(color='rgba(255, 0, 0, 0)'),
    showlegend=False,
    name='Below Lower Boundary'
))

fig.add_trace(go.Scatter(
    x=pd.concat([df_3['Date'], df_3['Date'][::-1]]),
    y=pd.concat([df_3['HeightDiff'], df_3['upperBoundary'][::-1]]),
    fill='toself',
    fillcolor='rgba(0, 0, 255, 0.3)',
    line=dict(color='rgba(0, 0, 255, 0)'),
    showlegend=False,
    name='Above Upper Boundary'
))

fig.update_layout(
    title='Height Difference and ARIMA Prediction',
    xaxis_title='Date',
    yaxis_title='ARIMA Prediction',
    yaxis2_title='Height Difference',
    template='plotly_white'
)

fig.show()
2

Hey @valst3 welcome to the forums.

I did not understand what you are after. Could you explain it differently? You only want to see the three lines and the purple shaded areas? In other words: get rid of the red and blue shaded areas?

3

Hi, yes exactly, basically getting rid of the red and blue area