Update Plotly Y axis range after setting X axis range

Question

I am graphing time series data with a long history using Plotly, and by default I would like the chart to be zoomed in on the most recent data. I can do this by setting the range argument of the update_xaxes method. However, the Y axis is still set based on the entire history of the data, whereas I would like it calculated on the actually visible data. For instance, in the code below the Y axis will be set to a range of (0,100), even though the visible data only starts at 50 (so expecting a range more like 50-100 on the Y axis). If the user were to then later scroll or zoom the X axis I would want the Y axis to continue to update to accommodate the visible data.

import pandas as pd
import numpy as np
import plotly.express as px

n = 100
df = pd.DataFrame({'x': np.arange(n), 'y': np.arange(n)})
fig = px.line(df, x='x', y='y')
fig.update_xaxes(range=(50,99))
fig.show()

Answer 1

If you want the yaxis range to dynamically resize depending on the visible data, you'll either need to use Dash or a FigureWidget which support callbacks.

As @Phoenix suggested in the comments, you could use a FigureWidget using a Jupyter notebook. Here is an example (with the dynamically calculated yaxis range displayed in the title for debugging purposes):

import plotly.graph_objs as go
import plotly.offline as py

import pandas as pd
import numpy as np

py.init_notebook_mode()

n = 100
df = pd.DataFrame({'x': np.arange(n), 'y': np.arange(n)})
fig = go.FigureWidget([go.Scatter(x=df['x'], y=df['y'])])
fig.update_xaxes(range=(50,99))

def zoom(xrange):
    xrange_zoom_min, xrange_zoom_max = fig.layout.xaxis.range[0], fig.layout.xaxis.range[1]
    yaxis_range = df.loc[df['x'].between(xrange_zoom_min,xrange_zoom_max), 'y']
    padding = (yaxis_range.max() - yaxis_range.min()) / 16
    
    fig.layout.yaxis.range = [yaxis_range.min() - padding, yaxis_range.max() + padding]
    fig.layout.title = f"Setting new range to {fig.layout.yaxis.range}"

fig.layout.on_change(zoom, 'xaxis.range')