Search code examples
pythonplotlyplotly-python

Plotly - how to display y values when hovering on two subplots sharing x-axis


I have two subplots sharing x-axis, but it only shows the y-value of one subplot not both. I want the hover-display to show y values from both subplots.

Here is what is showing right now: image1

But I want it to show y values from the bottom chart as well even if I am hovering my mouse on the top chart and vice versa.

Here's my code:

title = 'Price over time'
err = 'Price'


fig = make_subplots(rows=2, cols=1,
                    vertical_spacing = 0.05,
                    shared_xaxes=True,
                    subplot_titles=(title,""))

# A
fig.add_trace(go.Scatter(x= A_error['CloseDate'], 
                         y = A_error[err], 
                         line_color = 'green',
                         marker_color = 'green',
                         mode = 'lines+markers',
                         showlegend = True,
                         name = "A",
                         stackgroup = 'one'),
              row = 1,
              col = 1,
              secondary_y = False)

# B
fig.add_trace(go.Scatter(x= B_error['CloseDate'], 
                         y = B_error[err], 
                         line_color = 'blue',
                         mode = 'lines+markers',
                         showlegend = True,
                         name = "B",
                         stackgroup = 'one'),
              row = 2,
              col = 1,
              secondary_y = False)

fig.update_yaxes(tickprefix = '$')
fig.add_hline(y=0, line_width=3, line_dash="dash", line_color="black")

fig.update_layout(#height=600, width=1400, 
                  hovermode = "x unified",
                  legend_traceorder="normal")

Solution

  • Edit: At this time, I don't think a Unified hovermode across the subplots will be provided. I got the rationale for this from here. It does affect some features, but this can be applied to work around it. In your example, the horizontal line does not appear on both graphs. So, I have added two horizontal lines in line mode for scatter plots to accommodate this. With the two stock prices, you have set a threshold value for each. Your objective is the same threshold value, so please modify that.

    import plotly.express as px
    import plotly.graph_objects as go
    from plotly.subplots import make_subplots
    import yfinance as yf
    
    df = yf.download("AAPL MSFT", start="2022-01-01", end="2022-07-01", group_by='ticker')
    df.reset_index(inplace=True)
    
    import plotly.express as px
    import plotly.graph_objects as go
    from plotly.subplots import make_subplots
    
    title = 'Price over time'
    err = 'Price'
    
    fig = make_subplots(rows=2, cols=1,
                        vertical_spacing = 0.05,
                        shared_xaxes=True,
                        subplot_titles=(title,""))
    
    # AAPL
    fig.add_trace(go.Scatter(x = df['Date'], 
                             y = df[('AAPL', 'Close')], 
                             line_color = 'green',
                             marker_color = 'green',
                             mode = 'lines+markers',
                             showlegend = True,
                             name = "AAPL",
                             stackgroup = 'one'),
                  row = 1,
                  col = 1,
                  secondary_y = False)
    # APPL $150 horizontal line
    fig.add_trace(go.Scatter(x=df['Date'],
                             y=[125]*len(df['Date']),
                             mode='lines',
                             line_width=3,
                             line_color='black',
                             line_dash='dash',
                             showlegend=False,
                             name='APPL'
                            ),
                  row=1,
                  col=1,
                  secondary_y=False)
                                       
    
    # MSFT
    fig.add_trace(go.Scatter(x= df['Date'], 
                             y = df[('MSFT', 'Close')], 
                             line_color = 'blue',
                             mode = 'lines+markers',
                             showlegend = True,
                             name = "MSFT",
                             stackgroup = 'one'),
                  row = 2,
                  col = 1,
                  secondary_y = False)
    # MSFT $150 horizontal line
    fig.add_trace(go.Scatter(x=df['Date'],
                             y=[150]*len(df['Date']),
                             mode='lines',
                             line_width=3,
                             line_color='black',
                             line_dash='dash',
                             showlegend=False,
                             name='MSFT'
                            ),
                  row=2,
                  col=1,
                  secondary_y=False)
    
    
    fig.update_yaxes(tickprefix = '$')
    fig.update_xaxes(type='date', range=[df['Date'].min(),df['Date'].max()])
    
    #fig.add_hline(y=0, line_width=3, line_dash="dash", line_color="black")
    fig.update_layout(#height=600, width=1400,
        hovermode = "x unified",
        legend_traceorder="normal")
    fig.update_traces(xaxis='x2')
    
    fig.show()
    
    enter code here
    

    enter image description here