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:

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")

Answer

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