Plotly in Streamlit

Hello,

Using Plotly in streamlit seems to only work when clicking and dragging, or leaving the mouse on the plotly graph after clicking and dragging. Otherwise the graph disappears.

Graphing Function

z_data = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv’)
z = z_data.values
sh_0, sh_1 = z.shape
x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)
fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])
fig.update_layout(title=‘IRR’, autosize=False,
width=800, height=800,
margin=dict(l=40, r=40, b=40, t=40))
st.plotly_chart(fig)


Hi @kurt-rhee ,

I’m unable to reproduce the issue with your provided code snippet. Could you provide some more information? When does the graph disappear? Does it appear for a few seconds after the page loads then disappears? Do you have to take some action for it to disappear?

Perhaps if you could create an exact snippet where the graph is disappearing for you and then share exact reproduction instructions. For ex the code you shared above does not have any imports and does not run as given. Please include a full snippet with instructions to repro.

Also what streamlit version are you on? OS? Browser?

Hey @Jonathan_Rhone here are my answers:

  • The graph appears for a few seconds after the page loads then disappears as you guessed.
  • If you click on the graph the image returns.
  • If you then navigate away from the graph after clicking then it disappears again.
  • I am on streamlit 0.51
  • I am on a windows 10 machine with a conda enviornment.
  • I am using chrome browser

I will post a full code snippet in 30 minutes, once I get off of this meeting.

import os
import glob
import time
import multiprocessing

import streamlit as st
import numpy as np
import pandas as pd
import plotly.graph_objects as go

from Inputs_Parallel import get_possible_scenarios

# Side Bar #######################################################
project_title = st.sidebar.text_input(label="Title of Project",
                                      value="Example Project")

username = st.sidebar.selectbox(label="Username",
                                options=("a_name",
                                         "b_name"))

buildable_land_folder = st.sidebar.text_input(label="Buildable Land Folder",
                                              value=r"\\filepath\example")

config_file_location = st.sidebar.text_input(label="Config File",
                                             value=r"\\filepath\example")

gcr_config = st.sidebar.slider(label="Ground Coverage Ratio Range Selection",
                               min_value=10,
                               max_value=60,
                               step=1,
                               value=(28, 45))

sr_config = st.sidebar.slider(label="Sizing Ratio Range Selection",
                              min_value=1.0,
                              max_value=2.0,
                              step=0.1,
                              value=(1.0, 1.5))

run_button = st.sidebar.button(label='Run Optimization')

progress_bar = st.sidebar.progress(0)

# App ###########################################################
st.title(project_title)

# Graphing Function #####
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')
z = z_data.values
sh_0, sh_1 = z.shape
x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)
fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])
fig.update_layout(title='IRR', autosize=False,
                  width=800, height=800,
                  margin=dict(l=40, r=40, b=40, t=40))
st.plotly_chart(fig)

Hi,
I just tried your code on my machine, win10 on python 3.7.5, streamlit 0.51 and plotly 4.4.1, chrome 78
It seems to all be working well, no issue with display even when browsing away from the page and coming back

1 Like

The problem that I am able to see is that the chart flickers when I hover on it. Will open a bug for it.
Here is a gif of the buggy behavior:
plotly-bug

Gihub issue: https://github.com/streamlit/streamlit/issues/860

1 Like

Looks like I am on:

  • python = 3.6.9
  • streamlit = 0.51
  • plotly = 4.3.0
  • chrome = 79
  • windows = 10

Updating to plotly =4.4.1 has the same issue, where the color bar appears, but the actual graph is hidden unless you directly interact with it.

As I am planning to use this type of visual extensively, I was curious if the bug was fixed?

At least with bar, scatter, line, etc. I have never seen this type of behavior.

Great day you have!

I personally haven’t worked with this plot lately, not sure if it has been fixed.