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.
Add Your Data
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!
Add Your Range Slider
In the same 'Axes' section, go to the 'Range Slider' sub-tab and click on 'Show'.
The range slider will appear under your plot.
The height of the slider can be adjusted to your liking, and you can choose the slider background color, border color and width.
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.
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.
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.
Click on the STEP dropdown menu to change the timescale interval.
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'.
Add more buttons by clicking the blue '+Button' button.
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.
Your chart is now ready!