I am currently creating a plotly subplots to be able to handle having a range slider to control multiple (2 in my case) plots. I have been able to nail down that functionality. However, I am having some trouble customizing the range slider to have specific functionality. There are 2 possible solutions I have been trying to implement that I have not been able to figure out and was wondering if there any possible ways to address them.
Problem 1: I have my range slider created on xaxis1 which makes the range slider appear between subplots 1 and 2, however I would like the range slider to display subplot 1 but be below both subplot 1 and subplot 2. Is there any way to specify that I would like the range slider at the bottom of the figure but still display subplot 1 (I have moved it subplot 2, therefore moving the range slider to the bottom of the figure but it displays subplot 2 and not subplot1).
Problem 2: The other idea is to simply show both subplot 1 and subplot 2 on the range slider. The reason this thought process works is due to the fact that subplot 1 has a y axis that generally goes upwards of 20k where subplot 2 has a max yaxis of 100. This makes me think that although both would be displayed subplot 1 would not really overlap with subplot 2. Is there any way to stack data from both the subplots onto the range slider?
Note: There is no problem with controlling both subplots, that works well, it is simply what is displayed in the range slider that I would like to change (problem 2) or be able to move the range slider to the bottom of the figure (problem 1).
Here is the code I have if all of what I said makes no sense:
fig = plotly.subplots.make_subplots(rows=2, cols=1, row_heights=[0.5, 0.5], shared_xaxes=True, vertical_spacing=0.2)
fig.add_trace(go.Scatter(x=df[date], y=df[value], row=1, col=1)
fig.add_trace(go.Bar(x=df[date], y=df[value], row=2, col=1)
fig.update_layout(
showlegend=False,
plot_bgcolor="#FFFFFF",
height=650,
yaxis1=dict(showgrid=True, gridcolor="#D2DFF7", linecolor="#D2DFF7", mirror=True),
xaxis1=dict(type="date", tickformat="%-m/%-d/%Y", linecolor="#D2DFF7", mirror=True, matches="x"),
yaxis2=dict(title="Values", showgrid=True, gridcolor="#D2DFF7", linecolor="#D2DFF7", mirror=True),
xaxis2=dict(type="date", tickformat="%-m/%-d/%Y", linecolor="#D2DFF7", mirror=True, matches="x", rangeslider=dict(visible=True)),
)
fig.update_xaxes(matches="x")
return fig
This currently displays the range slider below subplot 2 (go.bar) but it displays the bar plot instead of the scatter. Moving the range slider to xaxis 1 will display the correct plot but it will insert the range slider under plot 1 but before plot 2 (we want plot 1, plot2, range slider). Is there any possible ways to address this issue?
I can include screenshots of the two problems too to make the issue more understandable.