Skip to content
Explore Automated Analysis

How to plot multiple time series with a range slider in Plotly (with Code)

Editorial · Published

The Short Answer (TL;DR)

Create one line trace per series on a shared date axis and enable xaxis_rangeslider_visible=True. The range slider changes the visible time window while retaining every observation in the figure.

import pandas as pd, plotly.express as px
data = pd.DataFrame({"date": pd.date_range("2026-01-01", periods=4), "sensor_a": [2, 3, 2, 4], "sensor_b": [4, 3, 5, 6]})
fig = px.line(data, x="date", y=["sensor_a", "sensor_b"]); fig.update_xaxes(rangeslider_visible=True); fig.write_html("time-series-slider.html", include_plotlyjs=True, auto_open=False)

Detailed Implementation

This example uses synthetic data and does not need a network connection. Install the recorded package versions in a separate Python environment before running it.

python -m pip install pandas==3.0.6 plotly==7.1.0
import pandas as pd
import plotly.express as px

data = pd.DataFrame({
    "date": pd.date_range("2026-01-01", periods=12, freq="D"),
    "sensor_a": [2, 3, 2, 4, 5, 4, 6, 5, 7, 6, 8, 7],
    "sensor_b": [4, 3, 5, 6, 5, 7, 6, 8, 7, 9, 8, 10],
}).sort_values("date")
fig = px.line(data, x="date", y=["sensor_a", "sensor_b"], markers=True,
              labels={"date": "Observation date", "value": "Measurement (units)",
                      "variable": "Sensor"}, title="Two sensors on a shared time axis")
fig.update_xaxes(type="date", rangeslider_visible=True,
                 rangeselector={"buttons": [
                     {"count": 5, "label": "5 days", "step": "day", "stepmode": "backward"},
                     {"label": "All", "step": "all"},
                 ]})
fig.update_layout(template="plotly_white", hovermode="x unified", height=520)
fig.write_html("time-series-slider.html", include_plotlyjs=True, full_html=True,
               auto_open=False, div_id="sensor-time-series")
# Open the HTML file and move the slider handles or select 5 days.

The standalone HTML contains two named traces with 12 daily measurements each, a shared date axis, a range slider and buttons labelled 5 days and All.

Why sort the dates before drawing lines?

Plotly connects points in their supplied order. Sorting makes each line follow increasing time; it does not fill missing dates, average duplicate measurements or infer values between observations. If repeated dates require aggregation, choose that rule before plotting.

Does the slider filter the dataframe?

The slider changes the displayed axis range. Both traces still contain all 12 measurements, so descriptive statistics calculated from the original dataframe remain unchanged. Recalculate statistics explicitly if the analysis should use only a selected time window.

How should series with different units be compared?

This example uses two sensors with the same measurement units. A shared y axis is appropriate for that comparison. For different units, use separate labelled panels or a justified transformation; putting unrelated quantities on the same scale can obscure the comparison.

Mathematical Context

A time series is a sequence of observed pairs (t_i, y_i). Selecting dates from a to b displays the observations whose timestamps fall in that interval, while the stored sequence is unchanged. The straight segments between points are graphical interpolation. The slider does not estimate a time-series model, smooth the measurements or generate a forecast.

\[ \{(t_i,y_i):a\leq t_i\leq b\} \]

Reproducibility

Executed with Python 3.12.14; pandas 3.0.6, plotly 7.1.0. Automated checks confirm the stated output properties.

Primary documentation

Related guides