Subplot with shared xaxis but with 2 independent xaxis in 1st plot

Hi everyone,

The challenge I have is when using subplots. The data comes from 2 different data frames with different index values. One is a timestamp and the other are whole numbers with positive and negative values. Plotting it without subplots works. Once I integrate subplots, the independent movement of the xaxises in the (row=1,col=1) is gone. Below is the code I am using.

What am I doing wrong?

import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots

fig = make_subplots(rows=2, cols=1,
shared_xaxes=True,
subplot_titles=(“Flat Profile”, “ducks”))

fig_px = px.bar(df_static_flat, x=“quantity”, y=“age”, color=“type”,
title=“Flat Profile”,
orientation=‘h’)

for trace in fig_px.data:
trace.xaxis = ‘x’
trace.yaxis = ‘y’
fig.add_trace(trace, row=1, col=1)

fig.add_trace(go.Scatter(
x=df.index,
y=df.p_sma36,
name=“p_sma36”,
mode=‘lines’,
line=dict(color=“rgb(228,26,28)”),
xaxis=‘x2’,
yaxis=‘y’),
row=1, col=1)

fig.add_trace(go.Scatter(
x=df.index,
y=df[‘ducks’],
name=“ducks”,
mode=‘lines’,
line=dict(color=“rgb(0,128,255)”),
xaxis=‘x2’,
yaxis=‘y2’),
row=2, col=1)

fig.update_layout(
title_text=“Flat Profile with Subplot”,
showlegend=True,
hovermode=“y unified”,
template=“plotly_dark”,
xaxis=dict(
title=“quantity”,
showline=True,
side=‘bottom’,
domain=[0, 1],
anchor=‘y’,
range=[df_static_flat[‘quantity’].min() - 0.2 * (df_static_flat[‘quantity’].max() - df_static_flat[‘quantity’].min()),
df_static_flat[‘quantity’].max() + 0.2 * (df_static_flat[‘quantity’].max() - df_static_flat[‘quantity’].min())], # Padding for centering
showticklabels=True,
tickmode=‘auto’
),
xaxis2=dict(
title=“p_sma36”,
overlaying=‘x’,
side=‘top’,
showline=True,
domain=[0, 1],
anchor=‘y’,
showticklabels=True,
type=‘date’, # Ensure date formatting
range=[df.index.min(), df.index.max()] # Full timestamp range for left alignment
),
yaxis=dict(
title=“Flat Profile”,
showline=True,
domain=[0.55, 1.0] # Adjust to fit first subplot
),

yaxis2=dict(
title=“ducks”,
showline=True,
domain=[0, 0.45] # Adjust to fit second subplot
)
)

fig.update_yaxes(
showgrid=True,
zeroline=False,
showticklabels=True,
showspikes=True,
spikemode=‘across’,
spikesnap=‘cursor’,
spikecolor=“grey”,
spikethickness=1,
spikedash=‘solid’,
side=‘right’,
row=1, col=1
)

fig.update_yaxes(
showgrid=True,
zeroline=False,
showticklabels=True,
row=2, col=1
)

fig.update_xaxes(
showgrid=False,
showticklabels=True,
showspikes=True,
spikemode=‘across’,
spikesnap=‘cursor’,
spikecolor=“grey”,
spikethickness=1,
spikedash=‘solid’,
type=‘date’,
range=[df.index.min(), df.index.max()], # Ensure left alignment
row=1, col=1,
selector=dict(name=‘xaxis2’)
)

fig.update_xaxes(
showgrid=False,
showticklabels=True,
showspikes=False, # Disable spikes for Volume axis
row=1, col=1,
selector=dict(name=‘xaxis’)
)

fig.update_traces(dict(marker_line_width=0))

fig.update_traces(
width=0.8, # Adjust bar width to make bars appear fuller
selector=dict(type=‘bar’)
)

fig.show()