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

**URL:** <https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354>\
**Category:** 📊 Plotly Python\
**Created:** [April 24, 2020, 4:53pm UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354 "2020-04-24T16:53:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![9eqUoa2vHj](https://avatars.discourse-cdn.com/v4/letter/9/779978/32.png) [@9eqUoa2vHj](https://community.plotly.com/u/9eqUoa2vHj)\
**Post date:** [April 24, 2020, 4:53pm UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/1 "2020-04-24T16:53:55Z")

</div>

Hi,

I’m a relatively new Plotly user. I’m experiencing the same issue as this [post](https://community.plotly.com/t/range-for-selector-is-too-large/1071), 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](https://plotly.com/python/reference/#layout-xaxis-rangeselector) and this [one](https://plotly.com/python/reference/#layout-xaxis-rangeslider). Here’s the starting image.

 ![Display_Issue_Interactive_Range_Slider_and_Selector_24Apr2020](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/94d4a73819a95061acb1e0b383427e7a5c9b88e7.png)

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](https://plotly.com/python/range-slider/#basic-range-slider-and-range-selectors).

```auto
# 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()

```

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [April 25, 2020, 4:28pm UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/2 "2020-04-25T16:28:57Z")

</div>

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

```auto
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"
    )
)

```

---

<div class="post-metadata">

**Author:** ![9eqUoa2vHj](https://avatars.discourse-cdn.com/v4/letter/9/779978/32.png) [@9eqUoa2vHj](https://community.plotly.com/u/9eqUoa2vHj)\
**Post date:** [April 26, 2020, 1:58am UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/3 "2020-04-26T01:58:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Supreet5](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@Supreet5](https://community.plotly.com/u/Supreet5)\
**Post date:** [March 11, 2021, 9:09pm UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/4 "2021-03-11T21:09:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/roland/32/31087_2.png) [@roland](https://community.plotly.com/u/roland)\
**Post date:** [December 15, 2022, 4:16pm UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/5 "2022-12-15T16:16:30Z")

</div>

@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:

```auto
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()

```

---

<div class="post-metadata">

**Author:** ![itiswell](https://avatars.discourse-cdn.com/v4/letter/i/d9b06d/32.png) [@itiswell](https://community.plotly.com/u/itiswell)\
**Post date:** [July 15, 2023, 8:26am UTC](https://community.plotly.com/t/range-slider-selectors-showing-partial-data-or-failing-to-show-data/38354/6 "2023-07-15T08:26:46Z")

</div>

Hi Forum,

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

```auto
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()

```