Python > Custom Controls > Range Slider and Selector
Suggest an edit to this page

Range Slider and Selector in Python

Now you can implement range sliders and selectors in your Plotly graphs purely with python!


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Basic Range Slider and Range Selectors

In [1]:
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" ) ) fig.show()

Range Slider with Vertically Stacked Subplots

In [2]:
import plotly.graph_objects as go # Create figure fig = go.Figure() # Add traces fig.add_trace(go.Scatter( x=["2013-01-15", "2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27", "2013-10-22", "2014-01-20", "2014-05-05", "2014-07-01", "2015-02-09", "2015-04-13", "2015-05-13", "2015-06-08", "2015-08-05", "2016-02-25"], y=["8", "3", "2", "10", "5", "5", "6", "8", "3", "3", "7", "5", "10", "10", "9", "14"], name="var0", text=["8", "3", "2", "10", "5", "5", "6", "8", "3", "3", "7", "5", "10", "10", "9", "14"], yaxis="y", )) fig.add_trace(go.Scatter( x=["2015-04-13", "2015-05-13", "2015-06-08", "2015-08-05", "2016-02-25"], y=["53.0", "69.0", "89.0", "41.0", "41.0"], name="var1", text=["53.0", "69.0", "89.0", "41.0", "41.0"], yaxis="y2", )) fig.add_trace(go.Scatter( x=["2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27", "2013-10-22", "2014-01-20", "2014-04-09", "2014-05-05", "2014-07-01", "2014-09-30", "2015-02-09", "2015-04-13", "2015-06-08", "2016-02-25"], y=["9.6", "4.6", "2.7", "8.3", "18", "7.3", "3", "7.5", "1.0", "0.5", "2.8", "9.2", "13", "5.8", "6.9"], name="var2", text=["9.6", "4.6", "2.7", "8.3", "18", "7.3", "3", "7.5", "1.0", "0.5", "2.8", "9.2", "13", "5.8", "6.9"], yaxis="y3", )) fig.add_trace(go.Scatter( x=["2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27", "2013-10-22", "2014-01-20", "2014-04-09", "2014-05-05", "2014-07-01", "2014-09-30", "2015-02-09", "2015-04-13", "2015-06-08", "2016-02-25"], y=["6.9", "7.5", "7.3", "7.3", "6.9", "7.1", "8", "7.8", "7.4", "7.9", "7.9", "7.6", "7.2", "7.2", "8.0"], name="var3", text=["6.9", "7.5", "7.3", "7.3", "6.9", "7.1", "8", "7.8", "7.4", "7.9", "7.9", "7.6", "7.2", "7.2", "8.0"], yaxis="y4", )) fig.add_trace(go.Scatter( x=["2013-02-26", "2013-07-02", "2013-09-26", "2013-10-22", "2013-12-04", "2014-01-02", "2014-01-20", "2014-05-05", "2014-07-01", "2015-02-09", "2015-05-05"], y=["290", "1078", "263", "407", "660", "740", "33", "374", "95", "734", "3000"], name="var4", text=["290", "1078", "263", "407", "660", "740", "33", "374", "95", "734", "3000"], yaxis="y5", )) # style all the traces fig.update_traces( hoverinfo="name+x+text", line={"width": 0.5}, marker={"size": 8}, mode="lines+markers", showlegend=False ) # Add annotations fig.update_layout( annotations=[ dict( x="2013-06-01", y=0, arrowcolor="rgba(63, 81, 181, 0.2)", arrowsize=0.3, ax=0, ay=30, text="state1", xref="x", yanchor="bottom", yref="y" ), dict( x="2014-09-13", y=0, arrowcolor="rgba(76, 175, 80, 0.1)", arrowsize=0.3, ax=0, ay=30, text="state2", xref="x", yanchor="bottom", yref="y" ) ], ) # Add shapes fig.update_layout( shapes=[ dict( fillcolor="rgba(63, 81, 181, 0.2)", line={"width": 0}, type="rect", x0="2013-01-15", x1="2013-10-17", xref="x", y0=0, y1=0.95, yref="paper" ), dict( fillcolor="rgba(76, 175, 80, 0.1)", line={"width": 0}, type="rect", x0="2013-10-22", x1="2015-08-05", xref="x", y0=0, y1=0.95, yref="paper" ) ] ) # Update axes fig.update_layout( xaxis=dict( autorange=True, range=["2012-10-31 18:36:37.3129", "2016-05-10 05:23:22.6871"], rangeslider=dict( autorange=True, range=["2012-10-31 18:36:37.3129", "2016-05-10 05:23:22.6871"] ), type="date" ), yaxis=dict( anchor="x", autorange=True, domain=[0, 0.2], linecolor="#673ab7", mirror=True, range=[-60.0858369099, 28.4406294707], showline=True, side="right", tickfont={"color": "#673ab7"}, tickmode="auto", ticks="", title=dict( font=dict( color="#673ab7" ) ), type="linear", zeroline=False ), yaxis2=dict( anchor="x", autorange=True, domain=[0.2, 0.4], linecolor="#E91E63", mirror=True, range=[29.3787777032, 100.621222297], showline=True, side="right", tickfont={"color": "#E91E63"}, tickmode="auto", ticks="", title=dict( font=dict( color="#E91E63" ) ), type="linear", zeroline=False ), yaxis3=dict( anchor="x", autorange=True, domain=[0.4, 0.6], linecolor="#795548", mirror=True, range=[-3.73690396239, 22.2369039624], showline=True, side="right", tickfont={"color": "#795548"}, tickmode="auto", ticks="", title=dict( text="mg/L", font=dict( color="#795548" ) ), type="linear", zeroline=False ), yaxis4=dict( anchor="x", autorange=True, domain=[0.6, 0.8], linecolor="#607d8b", mirror=True, range=[6.63368032236, 8.26631967764], showline=True, side="right", tickfont={"color": "#607d8b"}, tickmode="auto", ticks="", title=dict( text="mmol/L", font=dict( color="#607d8b" ) ), type="linear", zeroline=False ), yaxis5=dict( anchor="x", autorange=True, domain=[0.8, 1], linecolor="#2196F3", mirror=True, range=[-685.336803224, 3718.33680322], showline=True, side="right", tickfont={"color": "#2196F3"}, tickmode="auto", ticks="", title=dict( text="mg/Kg", font=dict( color="#2196F3" ) ), type="linear", zeroline=False ) ) # Update layout fig.update_layout( dragmode="zoom", hovermode="x", legend=dict(traceorder="reversed"), height=600, template="plotly_white", margin=dict( t=100, b=100 ), ) fig.show()

Reference

See https://plotly.com/python/reference/layout/xaxis/#layout-xaxis-rangeselector
and https://plotly.com/python/reference/layout/xaxis/#layout-xaxis-rangeslider
for more information and attribute options!

What About Dash?

Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash at https://dash.plot.ly/installation.

Everywhere in this page that you see fig.show(), you can display the same figure in a Dash application by passing it to the figure argument of the Graph component from the built-in dash_core_components package like this:

import plotly.graph_objects as go # or plotly.express as px fig = go.Figure() # or any Plotly Express function e.g. px.bar(...) # fig.add_trace( ... ) # fig.update_layout( ... ) from dash import Dash, dcc, html app = Dash() app.layout = html.Div([ dcc.Graph(figure=fig) ]) app.run(debug=True, use_reloader=False) # Turn off reloader if inside Jupyter