Bug: `make_subplots()` doesn't use shared x-axes for traces on different subplots, even when `shared_xaxes` is set to True
Description
When using make_subplots() with shared_xaxes=True, spike lines only appear on the subplot where the cursor is hovering, rather than showing across all subplots simultaneously.
Expected Behavior
When hovering over any subplot, a vertical spike line should appear at the same x-position across all subplots, similar to the behavior in TradingView or other financial charting tools.
Current Behavior
The spike line only appears on the subplot currently under the cursor. When moving to a different subplot, the spike line moves with the cursor instead of showing on all subplots.
Code Example
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
# Create sample data
df = pd.DataFrame({
'x': pd.date_range('2024-01-01', periods=100),
'y1': range(100),
'y2': [x**2 for x in range(100)]
})
# Create subplots
fig = make_subplots(
rows=2, cols=1,
shared_xaxes=True,
vertical_spacing=0.02
)
fig.add_trace(go.Scatter(x=df['x'], y=df['y1'], name='Line 1'), row=1, col=1)
fig.add_trace(go.Scatter(x=df['x'], y=df['y2'], name='Line 2'), row=2, col=1)
fig.update_xaxes(
showspikes=True,
spikemode='across',
spikesnap='cursor',
spikecolor='black',
spikethickness=1
)
fig.update_layout(hovermode='x unified')
fig.show()
What I've Tried
hovermode='x unified'- Only unifies hover labels, not spike linesfig.update_traces(xaxis='x')- Shows spikes across all subplots but breaks subplot layout (all data gets squeezed into first subplot's x-axis range)- Various combinations of
spikemode,spikesnap, andmatches='x'- No effect
Use Case
This feature is critical for financial/trading dashboards where users need to compare multiple indicators (price, volume, RSI, MACD, etc.) at the same point in time across multiple subplots.
Assigning to @emilykl to take a look and triage.
Thanks for the ticket @videni!
I'm able to reproduce the issue. Shared spikelines across multiple subplots should be supported, and it seems like the root cause is a bug in make_subplots() which is assigning different x-axes to the two traces even though the subplots were created with the setting shared_xaxes=True.
As a workaround, I'm able to get the shared spikeline behavior by manually setting both data traces to use the same x axis by adding this line after the add_trace() calls:
fig.update_traces(xaxis='x')
I would consider this a bug; I'll update the issue description to match and we'll do our best to take a look when we have the chance.
Small example demonstrating the shared x-axis behavior with make_subplots(shared_xaxes=True). The code snippet below produces the following plot JSON, where the two subplots have separate x-axes (x and x2), but use the axis.matched parameter to share the same range. Traces added to the figure then automatically use the x-axis of whichever subplot they are added to.
This means that the x-axes of the two plots remain synced when zooming and panning, BUT it means that features such as cross-subplot unified hover and spikelines don't actually work across subplots.
I think it's probably OK to have different x-axes for the individual subplots (because this allows us to do things like hide the axis tick labels on the top subplot), but I think that traces added via add_trace() should then always refer to the main x-axis (x), as this will allow the cross-subplot hover behavior to work as expected.
Note: I suspect the same behavior also applies to the y-axis but I haven't tested it.
import plotly.graph_objects as go
from plotly.subplots import make_subplots
# Create two vertically-stacked subplots with shared x-axis
fig = make_subplots(rows=2, cols=1, shared_xaxes=True)
# Add one trace to each subplot
fig.add_trace(go.Scatter(x=[1,2,3], y=[1,2,3]), row=1, col=1)
fig.add_trace(go.Scatter(x=[1,2,3], y=[1,3,2]), row=2, col=1)
print(fig.to_json())
Plot JSON:
{
"data": [
{
"x": [1, 2, 3],
"y": [1, 2, 3],
"type": "scatter",
"xaxis": "x",
"yaxis": "y"
},
{
"x": [1, 2, 3],
"y": [1, 3, 2],
"type": "scatter",
"xaxis": "x2",
"yaxis": "y2"
}
],
"layout": {
"template": {...},
"xaxis": {
"anchor": "y",
"domain": [0.0, 1.0],
"matches": "x2",
"showticklabels": false
},
"yaxis": {
"anchor": "x",
"domain": [0.575, 1.0]
},
"xaxis2": {
"anchor": "y2",
"domain": [0.0, 1.0]
},
"yaxis2": {
"anchor": "x2",
"domain": [0.0, 0.425]
}
}
}