Range Slider/Selectors showing partial data or failing to show data

9eqUoa2vHj · April 24, 2020, 4:53pm

Hi,

I’m a relatively new Plotly user. I’m experiencing the same issue as this post, where the data isn’t being shown for range selectors and slider. However, the suggested workaround (i.e., explicitly set the range for slider) isn’t solving the issue. I’ve also looked at the related reference docs like this one and this one. Here’s the starting image.

For instance, if I select 1M, I don’t see any data. Similarly, if I select 3M, I only see part of the data (i.e., 2 data points). The only selectors that are correctly working are all and ytd. In the code below, I’ve included a sizable test sample for reproducibility.

One thing that I noticed is that the number of data points is impacting whether or not the problem occurs. If you only plot the first (or last) six data points, everything displays fine.

Any guidance would be greatly appreciated. If it’s a bug, hopefully someone at Plotly will see this post and say the same.

I’m running the following versions in a condo environment:
plotly 4.6.0
Python 3.7.7
jupyter notebook 6.0.3
pandas 1.0.3
numpy 1.18.1
Matplotlib 3.1.3

Here’s the code. It’s largely based on the Plotly documentation.

# Imports used earlier in the code, but not necessarily in this reproducible example
%matplotlib inline
import numpy as np
import pandas as pd
import plotly.graph_objects as go
from datetime import datetime
from plotly import offline

# Create figure
fig = go.Figure()

# Data Set
dates=[
'2018-03-31',
'2018-04-30',
'2018-05-31',
'2018-06-30',
'2018-07-31',
'2018-08-31',
'2018-09-30',
'2018-10-31',
'2018-11-30',
'2018-12-31',
'2019-01-31',
'2019-02-28',
'2019-03-31',
'2019-04-30',
'2019-05-31',
'2019-06-30',
'2019-07-31',
'2019-08-31',
'2019-09-30',
'2019-10-31',
'2019-11-30',
'2019-12-31',
'2020-01-31',
'2020-02-29',
'2020-03-31',
]

metric=[
    65,
    254,
    341,
    317,
    281,
    290,
    245,
    165,
    269,
    203,
    212,
    259,
    246,
    174,
    332,
    305,
    298,
    283,
    236,
    273,
    277,
    263,
    334,
    337,
    237,
]

# Add traces
fig.add_trace(go.Scatter(
                x=dates,
                y=metric,
                mode='lines+markers',
                marker=dict(symbol='circle'),
                line=dict(
                    color='royalblue',
                    width=2,
                    ),
                name='Metric'),
             )

# Add range selectors and slider
fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label="1M",
                     step="month",
                     stepmode="backward"),
                dict(count=3,
                     label="3M",
                     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(label="All",
                     step="all")
            ])
        ),
        rangeslider=dict(
            visible=True,
            range=(dates[0], dates[-1])
        ),
        type="date"
    )
)

fig.show()

Emmanuelle · April 25, 2020, 4:28pm

Hi @9eqUoa2vHj welcome to the forum! You need to specify the range of the xaxis, not the one of the rangeslider:

fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label="1M",
                     step="month",
                     stepmode="backward"),
                dict(count=3,
                     label="3M",
                     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(label="All",
                     step="all")
            ])
        ),
        rangeslider=dict(
            visible=True,
            #range=(dates[0], dates[-1])
        ),
        range=(dates[0], dates[-1]),
        type="date"
    )
)

9eqUoa2vHj · April 26, 2020, 1:58am

Many thanks for your assistance, especially on a weekend. Your correction fixed the problem. Sometimes, you just have to laugh. I probably spent a few hours trying to debug it…just part of learning Again, thank you for sharing your knowledge.

Supreet5 · March 11, 2021, 9:09pm

Hi Plotly Team,

I am facing an issue with Range Slider where I am showing data for Range (2020-07-31 to 2021-03-09)
when the graph loads for first time and I select 1m, 3m, 6m then it shows proper range of 1 month data backwards from 2021-03-09, 3m data backwards from 2021-03-09 and 6m data backwards from 2021-03-09 respectively.
However once I select “All” and re select 1m then the range for 1m changes from 2021-02-22 to 2021-03-23 and same happens for 3m and 6m.

My Range slider code is same as suggested above:
fig.update_layout(
xaxis=dict(
rangeselector=dict(
buttons=list([
dict(count=1,label=“1M”,step=“month”,stepmode=“backward”),

                dict(count=3,label="3M",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(label="All",step="all")])
                ),             

                range=(dates[0], dates[-1]),type="date")

                )

Please suggest.

roland · December 15, 2022, 4:16pm

@Emmanuelle In my experience as @Supreet5 tried to point out the solution offered of setting the range doesn’t actually work entirely. Specifically, the first time the range selector buttons are pressed the ranges are set as expected, but once the graph is reset to show all the data again (either by double click or with the “All” button), the range of the graph is reset with some excess xaxis range from the end of the data to the end of the graph. So the second time through the range selector buttons they do not show the ranges expected since the end of the graph is offset from the end of the data.

This styling (of the extra space at the end of the graph) is true only when markers are used. So the range selector buttons work in all cases when the mode is ‘lines’, but it does not work as expected when the mode is “lines+markers” or “markers”.

I tested with Plotly 5.11

For completeness here is the version of the above example I used in my test:

import plotly.graph_objects as go
import pkg_resources

# Create figure
fig = go.Figure()

# Data Set
dates=[
    '2018-03-31',
    '2018-04-30',
    '2018-05-31',
    '2018-06-30',
    '2018-07-31',
    '2018-08-31',
    '2018-09-30',
    '2018-10-31',
    '2018-11-30',
    '2018-12-31',
    '2019-01-31',
    '2019-02-28',
    '2019-03-31',
    '2019-04-30',
    '2019-05-31',
    '2019-06-30',
    '2019-07-31',
    '2019-08-31',
    '2019-09-30',
    '2019-10-31',
    '2019-11-30',
    '2019-12-31',
    '2020-01-31',
    '2020-02-29',
    '2020-03-31',
]

metric=[
    65,
    254,
    341,
    317,
    281,
    290,
    245,
    165,
    269,
    203,
    212,
    259,
    246,
    174,
    332,
    305,
    298,
    283,
    236,
    273,
    277,
    263,
    334,
    337,
    237,
]

# Add traces
fig.add_trace(go.Scatter(
    x=dates,
    y=metric,
    mode='lines+markers',
    marker=dict(symbol='circle'),
    line=dict(
        color='royalblue',
        width=2,
    ),
    name='Metric'),
)

# Add range selectors and slider
fig.update_layout(
    template='plotly_white',
    title='Plotly Version ' + pkg_resources.get_distribution("plotly").version,
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label="1M",
                     step="month",
                     stepmode="backward"),
                dict(count=3,
                     label="3M",
                     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(label="All",
                     step="all")
            ])
        ),
        rangeslider=dict(
            visible=True,
        ),
        type="date",
        range=(dates[0], dates[-1])
    )
)

fig.show()

itiswell · July 15, 2023, 8:26am

Hi Forum,

I am trying to create a choropleth map with range selector and range slider. Is this possible? My sample code is below.

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd


df = px.data.gapminder()


fig = go.Figure(go.Scattergeo())

fig.add_scattergeo(locations = df['iso_alpha']
                      ,text = df['country']
                      ,marker_color = 'rgb(65, 105, 225)' # blue
                      ,showlegend = False
                     )


# 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="1y",
                     step="year",
                     stepmode="backward"),
                dict(count=2,
                     label="2y",
                     step="year",
                     stepmode="backward"),
                dict(count=3,
                     label="3y",
                     step="year",
                     stepmode="todate"),
                dict(count=4,
                     label="4y",
                     step="year",
                     stepmode="backward"),
                dict(step="all")
            ])
          ),
        rangeslider=dict(
        visible=True
        ),
        range=(list(df['year'])[0], list(df['year'])[-1]),
        type="Date"
      ),
    
)

    
fig.show()

Topic		Replies	Views
Updated data with "Range Slider and Selector" 📊 Plotly Python	2	1231	March 2, 2018
Range Slider and Selector plotly.js	2	3478	April 20, 2017
Range selector for non-timeseries data? 📊 Plotly Python	0	352	April 30, 2021
Range for selector is too large plotly.js	4	3195	May 23, 2016
Im a new user to plotly ,range selector buttons dont show up, please help me 📊 Plotly Python	2	676	May 23, 2022

Range Slider/Selectors showing partial data or failing to show data

Related topics