Show Sidebar Hide Sidebar

How to Add a Range Slider in Plotly 2.0

Learn to add a range slider and timescale buttons to a time-series chart using the Plotly 2.0 data visualization tool.

Step 1

Getting Started

The interactive slider allows you to experience your graphs on a whole other level. A great way to display a specific range within your chart, especially for a time series plot, the range slider and timescale buttons are two different features, with the buttons only applicable to time series plots.

Step 2

Add Your Data

Head to Plotly’s new online workspace and add your data.

Step 3

Create Your Plot

After your data's been added, go to GRAPH on the left-hand side, then 'Create'. Choose your 'Chart type', and add your traces using the X and Y dropdowns (this section is different depending on the chart type).

If you're creating a plot with dates and/or times, it's very important to format your data correctly, so make sure to check out this page first.

Like the way we've styled this plot? For more styling tips, see this tutorial!

Step 4

Add Your Range Slider

After you've plotted and styled your chart, you're ready to add the range slider feature.

In the same 'Axes' section, go to the 'Range Slider' sub-tab and click on 'Show'.

Range slider tab

The range slider will appear under your plot.

Range slider

The height of the slider can be adjusted to your liking, and you can choose the slider background color, border color and width.

Range slider attributes

Step 5

Add Your Timescale Buttons

Next you can add timescale button(s). The timescale button feature is only available when the plot's x-axis is a properly formatted date axis. Refer to this helpful page for more information on formatting dates in Plotly.

After formatting your time and/or dates, click on the 'Timescale Buttons' subtab (it's just underneath the 'Range Slider' subtab) in the same 'Axes' section. Then click the blue '+Button' button.

Timescale

Two buttons will appear on your plot. The 'reset' button is added by default to reset your slider range after you've clicked on a specific timescale button.

Reset button

The button next to it is the one you'll set up. We'll start with adding a timescale set for one year. Double-click on the field next to LABEL to add your own.

First button

Click on the STEP dropdown menu to change the timescale interval.

Step

For our 5-year timescale, we've chose the 'Year' as the STEP, and the number 5 as the COUNT. The STEPMODE has been selected to 'Backward'.

5 years

Add more buttons by clicking the blue '+Button' button.

Adding more buttons

The 'YTD' represents the year-to-date, which is the most recent date in your plot, and going back one year (from the month of January). This is where you'd select 'To Date' in your 'Stepmode'.

What's left now is to play with the style of the timescale buttons, including the background color, border width and its color, and text. You can also adjust the position of the buttons by clicking on the arrows next to the horizontal and vertical position fields.

Timescale attributes

Your chart is now ready!

Range slider attributes

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.