Keep state of plotly charts on browser window resize

[sebwills]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

If a user interacts with a plotly line chart in a streamlit dash (for example, zooming in, or hiding some series), then resizes the browser window (in a way that affects the rendering of the chart), the chart returns to its initial state.

Reproducible Code Example

import pandas as pd
import streamlit as st
import plotly.express as px

st.set_page_config(layout="wide")  # Not required, but makes bug more obvious, since every resize then affects the plot

df = pd.DataFrame([[1, 2, 3], [4, 5, 6]])

st.plotly_chart(px.line(df),
                use_container_width=True  # Makes bug more obvious
                )

Steps To Reproduce

1. Run the above as a streamlit app
2. click on one of the legend entries in the plot to hide it, or use the zoom tool in the popup plotly toolbar
3. resize your browser window, making it narrower or wider

Expected Behavior

Resizing the browser window should not undo changes made to the state of the plotly chart.

Current Behavior

Resizing the browser window undoes changes made interactively to the state of the plotly chart, returning it to default zoom, selected series, etc.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.20.0
• Python version: 3.9.9
• Operating System: N/A
• Browser: Chrome
• Virtual environment: venv

Additional Information

No response

Are you willing to submit a PR?

• Yes, I am willing to submit a PR!

[snehankekre]

Hi @sebwills 👋

Thank you for submitting this issue! IMO this is not a bug in st.plotly_chart but expected behavior. go.Layout() has a uirevision parameter that when set to any value preserves the state of the figure.

In your example, assign px.line(df) to fig and update the uirevision parameter like so to preserve the state of the figure while resizing the window:

import pandas as pd
import plotly.express as px

import streamlit as st

st.set_page_config(
    layout="wide"
)  # Not required, but makes bug more obvious, since every resize then affects the plot

df = pd.DataFrame([[1, 2, 3], [4, 5, 6]])

fig = px.line(df)
fig.update_layout({"uirevision": "foo"}, overwrite=True)

st.plotly_chart(fig, use_container_width=True)  # Makes bug more obvious

Source: https://discuss.streamlit.io/t/cant-enter-values-without-updating-a-plotly-figure/28066/2

[LukasMasuch]

Thanks @snehankekre for investigating! uirevision seems to solve this 👍 Maybe we could mention this somewhere in the plotly_chart docs as a tip?

I'm relabeling this as enhancement since I believe we could potentially also make this work out of the box in Streamlit (e.g. automatically setting the uirevision value).

[snehankekre]

Good call, Lukas! I'll add the uirevision workaround to the st.plotly_chart API reference examples in the docs repo next week.

[sebwills]

Thank you both! I confirm adding the suggested code works around the issue.

I do feel that this is unexpected behavior and as such it would make sense to incorporate the workaround into streamlit (automatically, not just in the docs) if you can. I can see it could make sense to reset the chart if the data it is plotting changes, but I can't imagine anyone would want or expect it to reset when you resize the browser.