✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Uirevision: keep UI state, except x_axis automargin

This is probably very easy but I haven’t seen a example I can apply.

I have a candlestick chart that updates every 3 minutes. Every 3 minutes my custom function update() inside the @callback downloads new ticker data. That’s how my data is updated, one candle at a time.

So far I managed to succesfully keep the zoom state between updates with uirevision (see code below). That’s fine.

Problem: I would like the x_axis to automatically shift one position as the latest candle is added. Otherwise, the new candle is plotted beyond the rightmost edge of the chart, which means is not visible, it’s hidden and I have to manually drag the chart to uncover the new candles.

Is x_axis automargin the attribute I need here?
How can I keep the UI state and at the same time allow the chart to shift one position making the last candle added visible?

Thanks

@app.callback(
Output(‘chart’, ‘figure’),
[Input(‘interval1’, ‘n_intervals’)])
def update_figure(n_intervals):

trace,layout = update()

graphdata =  {
    'data': trace,
    'layout': layout
}



graphdata['layout']['uirevision'] = True


return graphdata

Inside the layout definition inside the function that updates the data:

fig.update_layout(
autosize=False,
width=1400,
height=700,
margin=dict(
l=10,
r=10,
b=10,
t=10,
pad=4
),
paper_bgcolor=“LightSteelBlue”,
uirevision=True
)