Plotly_events and figure formatting

🧩 Custom Components
1

Hello,
This is my first post so first of all thanks to the community and everyone helping and contributing!

After searching through the forum and the internet I did not seem to find the answer to my problem:
I am using plotly_events to plot a chart on which I activate a click_event function to get and save data of the point clicked on the graph.
Now the problem is that my app has a sidebar and when creating the chart I can’t format the figure so that it fits in the screen. When the sidebar is open the chart’s right side is out of the screen, but when the sidebar is closed the whole chart is within the screen.
The chart is plotted with:
plotly_events(chart, click_event=True)

On the other hand when the chart is created with st.plotly_chart() it fits perfectly with in the app screen.

I have tried passing st.plotly_chart() to plotly_events( st.plotly_chart(), click_event=True).
which solves the displaying problem but then the click_event is not working.

Does anyone have an idea how to fix this?

2

Hi @nirco13 ! Thanks for posting your problem. It’s great to hear about your problems.

Can you possibly post the code where it is working and it’s not working? I can try debugging it. Maybe it’s a bug for streamlit and maybe it could be a great find :smiley:

Thanks,

William

3

Hi @willhuang,
The app includes an interactive chart that the user can change.
Following is the code where the chart is not fitted to the app screen unless I force it using predefined width and height.

def create_chart(radio, select):
— …
— width = ###
— height = ###
— return fig

with st.sidebar:
— radio = st.radio(…)
— select = st.selectbox(…)

fig = create_chart(radio, select)

with st.container:
— selected_point = plotly_events(fig, click_event=True)

On the other hand, this code fits the chart perfectly to the app but then the click event is not working:

with st.container:
— plotly_events(st.plotly_chart(fig, use container_width=True), click_event=True)

4

Hey I see this. I will check it out later today when I have time!

5

@nirco13 , it looks like some of the code is omitted such as plotly_events and create_chart. Would you happen to have that code?

1 Like
6

plotly_events it is a built-in function of streamlit_plotly_events module
create_chart it is just a function that returns a plotly figure based on data from a dataframe.
Here’s the function structure:

def create_plot():
   fig = make_subplots(specs=[[{"secondary_y":True}]])

   fig.add_trace(go.scattergl(x=df['x'], y=df['y1'], name='y1'), scondary_y=True)
   fig.add_trace(go.scattergl(x=df['x'], y=df['y2'], name='y2'))

   fig.update_layout(title='chart 1', template='plotly_white',
       width=1400, height=900)
   return fig
7

Hi nicro13, I tried running your code but it looks like im missing some imports. can you also put your imports here? Thanks

8

Sorry, I probably should have mentioned that I’m using additional modules.
I believe what you are missing is the following import which comes from streamlit_plotly_events module:

from streamlit_plotly_events import plotly_events

Other than that all other imports are pretty standard (streamlit, plotly.express, plotly.graph_objects)

9

Hi @nirco13 , sorry for the late reply. what would be the df and go be? Are those packages? Is it possible to copy and paste that is easily reproducible for me? Otherwise I would have to search for all the packages and guess on some of the code.

10

Usually df stand for a pandas dataframe and go for plotly graphic objects.
Instead of the df you can use simple arrays like np.array([1,2,3]).
The goal here is to understand how to use the streamlit keyword use_container_width within the community component plotly_events .

1 Like
11

Hi there,

Has there been any solution to this problem? I have been experiencing the same issue. The app that I am building contains a charts created from both plotly_events() and st.plotly_chart(). If I change the zoom of my page, the plotly_chart() graph will adapt its size however the the one using st.plotly_chart() will not. The screenshot below shows this (the top graph has been cut off).

image
image1890×902 63.9 KB

Thanks, Dan

12

@willhuang I am also observing a problem with the streamlit_plotly_events function. In my case, everytime I have tried to use it with a plotly chart:

  • the original chart does not show any event
  • a duplicate figure is created, with simplified formatting and black colors, and with click events

Why does this happen?
Screenshot and code snippet below

image
image1591×1006 62.1 KB


        fig = px.scatter_geo(
            df,
            lat='latitude', lon='longitude',
            color='heat_index', 
            projection='stereographic', scope='europe',
            fitbounds='locations',
            )
        
        fig.update_traces(marker=dict(size=10))
        fig.update_layout(
            title='Mappa',
            # autosize=True,
            showlegend=False,
            height=600,
            margin=dict(l=10,r=10,t=0,b=0),
            geo=dict(
                center=dict(lat=42.3,lon=13.8),
                projection_scale=3,
            )
        )
        scatter = fig.data[0]
        st.plotly_chart(fig,use_container_width=True)
        selected_points = plotly_events(fig, click_event=True, hover_event=False)
13

@Giovanni_Bailardi have you found a solution to this?

14

I had to modify the component directly. As it is, plotly_events() doesn’t allow automatic stretching with window size.

15

Could you show us how you modified the component?