Adjusting rangeslider height

📊 Plotly Python
1

Hi forum,

I am trying to add a rangeslider to a time series plot, but the slider seems to tall for my plot.
Is there a option for us to adjust the height of the rangeslider?

Thanks!

2

Hi @Pill, I don’t know whether this will help:

You need to update the xaxes and specify a “number between or equal to 0 and 1.” This number will be “the height of the range slider as a fraction of the total plot area height.” This info can be found in the layout.xaxis documentation.

Example implementation:

Using the python plotly example for Rangeslider and Selector.

import plotly.graph_objects as go
import pandas as pd

# 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]

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)))

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

# Add range slider
fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                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")
            ])
        ),
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
)

# This is the line you must add before showing the plot
# The rangeslider now has a height that is 40% of the total plot area height
fig.update_xaxes(rangeslider_thickness = 0.4)

fig.show()

Result:

0.4
0.4700×450 24 KB

Change the thickness parameter:

....

# This is the line you must add before showing the plot
# The rangeslider now has a height that is 10% of the total plot area height
fig.update_xaxes(rangeslider_thickness = 0.1)

fig.show()

Result:

0.1
0.1700×450 24.2 KB

1 Like
3

Hi @lloyd, rangeslider_thickness works great! Thank you!