Hoversubplots="axis" not working with make_subplots

I tried adapting the example on this page under “Hover on Subplots” to use make_subplots instead of specifying the axis directly like this:

import plotly.graph_objects as go
from plotly import data
from plotly.subplots import make_subplots

df = data.stocks()


fig = make_subplots(rows=3, cols=1, shared_xaxes=True, vertical_spacing=0.03)
layout = dict(
    hoversubplots="axis",
    title="Stock Price Changes",
    hovermode="x",
    grid=dict(rows=3, columns=1),
)

fig.add_trace(go.Scatter(x=df["date"], y=df["AAPL"], name="Apple"), row=1, col=1)
fig.add_trace(go.Scatter(x=df["date"], y=df["GOOG"], name="Google"), row=2, col=1)
fig.add_trace(go.Scatter(x=df["date"], y=df["AMZN"], name="Amazon"), row=3, col=1)
fig.update_layout(layout)
fig.show()

However, this gives the following result:

Instead of the example where all traces have a label.

I’m using plotly 5.22.0

1 Like

Hi @simdeb
This might be a bug. What’s the reason you prefer to use make_subplots instead of specifying the axis directly?

Hey @adamschroeder, I’m experiencing the exact same bug.
hoversubplots works well when specifying the axis directly but not with make_subplots.
The reason why I prefer make_subplots is because I like the row_heights and vertical_spacing attributes, as well as the shared_x/yaxis attribute.

Also, unrelated to this bug, hovermode="x unified" for hoversubplots draws the dashed lined accross the spacing between the subplots. Is there a way to remove this and only show the dashed line on the subplots themselves?
image

Thank you @avimuni and @simdeb for reporting this bug.
I opened a github issue to report the bug on the Plotly repo as well.

@avimuni can you please provide the full code for the last question you have regarding the dashed line?

@adamschroeder Thanks for you response.

Regarding the dashed line, I just followed the example in the documentation, but changed the hovermode from x to x unified:

import plotly.graph_objects as go
import pandas as pd
from plotly import data

df = data.stocks()

layout = dict(
    hoversubplots="axis",
    title="Stock Price Changes",
    hovermode="x unified", 
    # hovermode set to x unified creates a single hover label appear,
    # describing one point per trace, for points at the same x (or y) value as the cursor.
    # The result, however, is a dashed line that shows across the entire plot, 
    # and not on each individual subplot.
    grid=dict(rows=3, columns=1),
)

data = [
    go.Scatter(x=df["date"], y=df["AAPL"], xaxis="x", yaxis="y", name="Apple"),
    go.Scatter(x=df["date"], y=df["GOOG"], xaxis="x", yaxis="y2", name="Google"),
    go.Scatter(x=df["date"], y=df["AMZN"], xaxis="x", yaxis="y3", name="Amazon"),
]

fig = go.Figure(data=data, layout=layout)

fig.show()

The desired effect can be seen here (not my code, but created using Highcharts):


Basically, the dashed line should not overlay the spacing between subplots, as this spacing can contain subplot titles / annotations / updatemenu buttons / etc.

I see what you mean, @avimuni . I’ll look for a way to cut the lines between the subplots, but I don’t think that is currently possible. If I find a way, I’ll let you know.

1 Like