Positioning slider under multiple subplots

📊 Plotly Python
1

Hi,
i have a timeseries chart with multiple subplots. If i enable the rangeSlider, it displays just under the first plot, and covers the the 2nd subplot. is there a way to position it to the bottom of all subplots…
you can see the issue below:

image

2

@dizzy0ny

The rangeslider is associated to the x-axis. Hence to bind the slider to all subplots you must define shared xaxes:

import plotly.graph_objects as go
import pandas as pd
from plotly.subplots import make_subplots
# Load data
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

fig = make_subplots(rows=2, cols=1, vertical_spacing=0.065, shared_xaxes=True)
fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)), 1, 1)
fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)), 2, 1);

fig.update_layout(
    title_text="Time series with range slider and selectors")


fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=[
                dict(count=1,
                     label="1m",
                     step="month",
                     stepmode="backward"),
                dict(count=6,
                     label="6m",
                     step="month",
                     stepmode="backward"),
                dict(count=1,
                     label="YTD",
                     step="year",
                     stepmode="todate"),
                dict(count=1,
                     label="1y",
                     step="year",
                     stepmode="backward"),
                dict(step="all")
            ]),
        type="date"),#end xaxis  definition
    
    xaxis2_rangeslider_visible=True,
    xaxis2_type="date"
    );
fig.show()

common_rangeslider
common_rangeslider700×500 23 KB

3

I do have shared_xaxes=True. The problem i have it that it overlays on top of the 2nd sublot, as opposed to being at the bottom as in your case. im not sure why.

Snippet of my code is as follows:


        fig = fig = make_subplots(rows=3, cols=1, shared_xaxes=True, 
                vertical_spacing=0.005, row_heights=[0.7,0.15,0.15], specs=secondary_axis)
        ...
        ...
        ...
        fig.update_xaxes(showline=True, linewidth=1, linecolor='darkgray', mirror=True, ticks='outside', 
                showspikes=True, spikemode='across', spikesnap='cursor')

        fig.update_yaxes(showline=True, linewidth=1, linecolor='darkgray', mirror=True, ticks='outside', side='right',
                showspikes=True, spikemode='across', spikesnap='cursor')
        
        fig.update_layout(margin=dict(l=20, b=50, t=50), font_size=10, 
                        hovermode='x unified',dragmode='zoom', spikedistance =  -1,
                        yaxis2=dict(side='left', overlaying="y", scaleanchor='y', scaleratio=20, constrain='domain')) #make seconary axis on the left

        fig.update_layout(xaxis_rangeslider_visible=True, xaxis_type="date")

FYI: If i change the last line to use ‘xaxis2’ then two sliders appear (that are syncd)

4

You can explicitly state:

fig.update_layout(xaxis_rangeslider_visible=False, 
                  xaxis2_rangeslider_visible=True, 
                  xaxis_type="date")
5

What if I want the range slider on the bottom and showing the data from the chart at the top?