Maintain plot in zoomed in state after on_click plotly_event

[aj7777]

Summary

I am trying for my app to have a callback for the click event in a plotly chart setup by streamlit. I want for the graph to not reset once the click action is performed on the chart and maintain the axis in their old positions.

Steps to reproduce

Code snippet:

import streamlit as st
from streamlit_plotly_events import plotly_events
import plotly.express as px
import pandas as pd

df = pd.DataFrame(dict(
    x = [1, 3, 2, 4],
    y = [1, 2, 3, 4]
))
fig = px.line(df, x="x", y="y", title="Unsorted Input", markers=True)
selected_points = plotly_events(fig, key="test")
st.write(selected_points)

This is a small reproducible example. The following libs are required:

• streamlit
• pandas
• plotly
• streamlit_plotly_events

Run this code using streamlit run main.py and then try and zoom into the chart so only one point is visible. Click on any of the (x, y) points from the chart. The chart resets to the old position (the equivalent of clicking on the reset axis button).

Expected behavior:

Load another streamlit component like a table when the point is clicked and maintain the plot in the zoomed-in position.

Actual behavior:

The graph resets to the default position and the zoomed in position is lost.

Debug info

• Streamlit version: 1.15.0
• Python version: 3.7
• Using Conda? PipEnv? PyEnv? Pex?
• OS version: macos Ventura
• Browser version: Chrome/Safari

[snehankekre]

Hi @aj7777,

Welcome to the Streamlit community!

Thank you for sharing a reproducible example. This question has been asked previously and answered. Here’s the solution:

Can't enter values without updating a plotly figure

Hi @savva, welcome to the Streamlit Community! Firstly, thank you for providing a reproducible example! It makes debugging so much easier. go.Layout() has a uirevision parameter that when set to any value preserves the state of the figure. In your example, add the following line after you create the figure: fig.update_layout({"uirevision": "foo"}, overwrite=True) Example import numpy as np import plotly.figure_factory as ff import streamlit as st if "bin_size" not …

Note: the previous thread was purely using Plotly and not the streamlit_plotly_events custom component. Let us know if the attached solution doesn’t work for you.

Happy Streamlit-ing!
Snehan

[aj7777]

Hi Snehan,

Thanks for your reply. The only reason I am using the streamlit_plotly_events package is bring interactivity into my plots. I want to load a small section based on which points were clicked in a scatter plot. I am not sure I can do that with just streamlit yet? Is my understanding correct? I will try the solution you recommended and post back if that works for me.

Thanks

[aj7777]

This worked for me! Thank you for the help Snehan.