Problem with Plotly figure update!

Hello everyone, I’ve been using Streamlit for more than a year now, but this is my first post on this forum. I’m developing a Streamlit app where users will be able to select a variable they want to be visualized as a Plotly figure. My goal is to have a radio button and a select box, so users can select both the category as well as the variable they want to be plotted. When I pick an option on the select box, it triggers a rerun of the application and the figure is updated as expected. This doesn’t happen with the radio button unfortunately, unless I put it above the Plotly figure, but I don’t like this layout. I have tried utilizing session states, but with no luck so far. The main problem is there isn’t a simple way to update a plot on Streamlit, and using a callback function will simply create another identical figure, instead of updating the existing one. I’m attaching a screenshot of my application in case it helps, and I hope my explanation makes sense. Any suggestions will be appreciated, thanks!!!

Giannis Tolios

App Screenshot|470x500

Hi @giannis_tolios,

Glad to hear you have been using and liking Streamlit over the last year, welcome to our forum, and congrats on posting your first question! :partying_face: :star2: :tada:

This is actually a super easy fix and you don’t even need session state. This can easily be solved with containers.

st.containers or st.empty create and “hold” a spot on your app for something you’re not ready to code yet. It’s literally like a friend that holds a spot for you in a long line. This allows you to code other objects and widgets and then go back and fill in that empty spot or container!

You can do this exact thing in your situation, in fact here is a little mock-up of that:

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

st.title("Plotly Graphs with containers")

chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])

plot_spot = st.empty() # holding the spot for the graph

#make the widgets that will change the graph
line = st.selectbox("Choose a column:", chart_data.columns)

title = st.radio("Decide to include a title:", ["Yes", "No"])

#now code the plotly chart based on the widget selection
fig = px.line(chart_data, x=chart_data.index, y=line)

if title == "Yes":
    fig.update_layout(title="My graph title")

#send the plotly chart to it's spot "in the line" 
with plot_spot:
    st.plotly_chart(fig)

at first render this gives:

and then if you interact with the widgets:

notice that my graph had changed to plot column c and I was able to remove the title with my radio button!

Happy Streamlit-ing!
Marisa

3 Likes

Hello @Marisa_Smith , thank you for replying. I just tried your approach and it worked perfectly. I really appreciate your help, as this bug was driving me crazy the past few days!

1 Like

Hello @Marisa_Smith, I have a question about holding graph too. I want to create 2 columns of graphs. When i use:

import streamlit as st
import plotly.express as px
 
col1, col2 = st.columns(2)
while(1):
   data = update(logfile_name)
   
   fig = px.line(data, y=data.abc)
   col1.plotly_chart(fig, use_container_width=True)

   fig = px.line(data, y=data.def)
   col2.plotly_chart(fig, use_container_width=True)

, new row of graphs will be created. With st.empty() the code work perfectly, however i can only create one column of graph.
Is there a way to make x columns of graph that can be updated?

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.