Range selectors

In this lesson, we will learn about the range selectors in Plotly, which allow users to interactively select a range of data on the x-axis to narrow down the focus of the graph. This is particularly useful when dealing with a large dataset or time series data.

What are range selectors?

Range selectors are interactive UI elements that enable users to select a specific range of data along the x-axis, by either clicking on buttons with predefined ranges or by dragging a slider to define a custom range. This helps in narrowing down the focus of the plot and making it easier to analyze specific parts of the data.

Creating a basic range selector

Let's create a basic line plot with a range selector. We will use the px.line function from Plotly Express to create the plot and then customize the x-axis to add the range selector.

import plotly.express as px

# Load the built-in dataset
data = px.data.stocks()

# Create the line plot
fig = px.line(data, x='date', y='GOOG', title='Google Stock Prices')

# Customize the x-axis to add the range selector
fig.update_xaxes(
    rangeslider_visible=True,
    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")
        ])
    )
)

fig.show()

In the code above, we first create a line plot using the px.line function, with the Google stock prices as the y-axis and the date as the x-axis. We then customize the x-axis using the update_xaxes method. The rangeslider_visible parameter is set to True to display the range slider below the plot, and the rangeselector parameter is set to a dictionary containing a list of buttons for predefined ranges (1 month, 6 months, year-to-date, 1 year, and all data).

Customizing the appearance of range selectors

You can further customize the appearance of the range selector and the range slider by modifying the properties of the rangeselector and rangeslider parameters in the update_xaxes method. Here's an example:

import plotly.express as px

# Load the built-in dataset
data = px.data.stocks()

# Create the line plot
fig = px.line(data, x='date', y='GOOG', title='Google Stock Prices')

# Customize the x-axis to add the range selector
fig.update_xaxes(
    rangeslider=dict(
        visible=True,
        thickness=0.1,
        bgcolor='rgba(150, 200, 250, 0.5)'
    ),
    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")
        ]),
        x=0.5,
        y=1.1,
        font=dict(size=14, color='rgba(0, 0, 0, 0.7)'),
        bgcolor='rgba(150, 200, 250, 0.5)',
        bordercolor='rgba(0, 0, 0, 0.5)',
        borderwidth=2
    )
)

fig.show()

In this code, we added additional properties to the rangeslider and rangeselector parameters. For the rangeslider, we set the thickness to control the height of the slider and the bgcolor to change the background color. For the rangeselector, we set the x and y positions, the font size and color, the background color, the border color, and the border width.

Conclusion

In this lesson, we learned about the range selectors in Plotly, which allow users to interactively select a range of data on the x-axis. We created a basic line plot with a range selector and customized its appearance using the update_xaxes method.

Now you can use range selectors in your own interactive visualizations to allow users to focus on specific parts of the data.