Inbuild rangeslider's visible range - How to control?

Plotly has a scatter plot. To which you can apply update_xaxis function and enable the inbuild range slider (not to confuse with a separate component that is also called RangeSlider).

If I set fixedrange to True, and autorange to False, I get the complete dataset used for the plot, and only a fraction of it visible immediately. That is, the data set spans between 1937 and 2020, and it’s loaded in full, but right away I see a shorter period of time.

Specifically, I see a span of exactly 1 year (2000, i.e. dataset’s maximum minus 20 years). Look at the pic to see what I mean.

The question is: how can I change the default visible interval? Haven’t found anything to control that parameter in the docs. Any advice is deeply appreciated.

hi @shoomow
this is an interesting question and problem. Can you please a share a minimal working example: your code and data, so we can replicate locally on our computer.

Below is my working code. Find dataset here: 21.8 KB file on MEGA

import pandas as pd
from abc import ABC
from dataclasses import dataclass
import arrow
from plotly import express as px, graph_objects as go
from datetime import datetime

@dataclass
class Event(ABC):
    name: str
    date: arrow
    description: str | None
    period: str | None

@dataclass
class Interval(ABC):
    name: str
    start: Event
    end: Event

    def length(self, unit:str) -> int | str:
        l = (self.end.date - self.start.date).days
        match unit:
            case 'seconds':
                return l * 24 * 60 * 60
            case 'minutes':
                return l * 24 * 60
            case 'hours':
                return l * 24
            case 'days':
                return l
            case 'weeks':
                return l // 7
            case 'months':
                return (l / 365) * 12
            case 'years':
                return l / 365
            case _:
                return "I don't know this unit"

def return_datetime(date: str) -> datetime:
    return datetime.strptime(date, '%Y-%m-%d')

cher = pd.read_csv('cher2.csv')
cher['date'] = cher['date'].apply(return_datetime)

events, interval_start, interval_end, intervals = [], [], [], []

for r in cher.itertuples(index=False):
    if r[2] == 0:
        ev = Event(name=r[0], date=r[1], description=None, period='start')
        events.append(ev)
        interval_start.append(ev)
    elif r[2] == 1:
        ev = Event(name=r[0], date=r[1], description=None, period='end')
        events.append(ev)
        interval_end.append(ev)
    else:
        ev = Event(name=r[0], date=r[1], description=None, period=None)
        events.append(ev)


intervals2 = [
        (interval.name, interval.start.date, interval.end.date, 0.5)
        for interval in intervals
    ]

df = pd.DataFrame(intervals2)

df2 = pd.DataFrame(events)
df2['y'] = 3

fig = px.timeline(
    data_frame=df,
    x_start=1,
    x_end=2,
    y=3,
    color=0,
    color_discrete_sequence =px.colors.qualitative.Bold,
    height=500,
    opacity=0.6
)
fig.update_layout(showlegend=False, plot_bgcolor='white')
fig.update_yaxes(showticklabels=False, title_text=None, showgrid=False)
fig.add_trace(
    go.Scatter(
        x=df2['date'],
        y=df2['y'],
        mode='markers',
        marker={'color': 'black', 'size': 3, 'symbol': '200'}
    )
)
fig.update_xaxes(fixedrange=True,
                 showline=True,
                 linewidth=1,
                 linecolor='black',
                 showgrid=False,
                 autorange=False,
                 rangeslider={
                     'visible': True,
                     'yaxis': {'range': [0.2, 0.4], 'rangemode': 'fixed'},
                 },
                 rangeselector={
                     'visible': True,
                     'buttons': [
                         {'label': '10 years',
                          'step': 'year',
                          'stepmode': 'todate',
                          'count': 10},
                         {'label': '1 year',
                          'step': 'year',
                          'stepmode': 'backward'}
                     ],

                 },
                 tickmode='array',
                 tickvals=df2['date'],
                 ticklen=240,
                 tickcolor='black',
                 tickwidth=1,
                 showspikes=True,
                 spikecolor='blue',
                 ticks='inside',
                 tickformat='%d %b <br>%Y'
                 )

fig.show()

The csv might be corrupt or my computer is translating the file data incorrectly, which causes the app to throw an error. I’m getting this under the Name column when I open the csv sheet:

Родился
Пошел в школу
Закончил 7 лет школьного обучения
Призван во флот
Начал службу в качестве “ученика машиниста трюмного”
Принял военную присягу
Начал водолазную подготовку
Закончил водолазную подготовку
Сдал экзамены на водолаза
Получил книжку водолаза
Получил квалификацию “корабельного легкого”
Получил специальность “машинист трюмный”

it’s in russian. You can replace it with whatever, it doesn’t matter for the plot