I’m making some line and scatter plot in a streamlit app. A few of the plots fail to render and I see a frame only. On the left I see a sad smiley face. The underlying data is there, if I hover on the white surface I can find the invisible data points. Now, I can also get back a functioning plot by clicking on the curves in the legend. Has anyone experienced this?
Hi @edsav
Welcome to the Plotly Dash community,
When using Plotly Graphs, our recommendation is to build them within a Dash app because Plotly graphs are native to Dash.
My recommendation is that you separate the graphing library from the app library. Don’t worry about the app for now. First, focus on getting the scatter or line chart to plot the data correctly. Once the plots work successfully, you can try to incorporate them into an app. If you choose to go with Dash, I’m sure there are many community members that can help you. If you choose to go with streamlit, their community forum would be the best place to ask your question.
To get started, I recommend reading about the scatter and line charts. If you are still stuck, let us know. We’d be happy to help.
1 Like
Thanks for the prompt reply! So at first the plot looks like the attached figure. But once I click on the curves in the legend they appear, the sad smiley face disappears and the plot is correct. Would you guess the problem is due to the app rather than the plotting itself?
Not sure… the problem might have to do with the app.
Can you share the code for the Plotly line chart you’re having problems with?
It happens to a handful of plots, here’s an example:
import plotly.express as px
import pandas as pd
df_hourly_summed = pd.read_csv('data_hourly_renamed.csv', parse_dates=['time'])
def plotseries(
df,
y,
x=None,
color: str = None,
line_dash_sequence=None,
title="",
facet_row=None,
facet_col=None,
vary_style=False,
height=None,
markers: bool = False,
):
"""Line-plot using plotly express."""
x_ = df.index if x is None else x
fig = px.line(
df,
x=x_,
y=y,
title=title,
color=color,
line_dash_sequence=line_dash_sequence,
line_dash=color if vary_style else None,
facet_row=facet_row,
facet_col=facet_col,
markers=markers,
)
fig.update_layout(height=height)
return fig
fig = plotseries(
df_hourly_summed,
x='time',
y='y1',
color='categ',
title="My title",
)
In the streamlit app I pass the fig object to the streamlit plotly_chart function.
hi @edsav
can you please share access to your csv sheet with us. That will allow us to run your code locally. Thank you,
Here it is data_hourly_renamed.csv - Google Drive
Hi @edsav ,
When I run your code I get a working graph.
I also tried putting it inside a Dash app by adding a few lines of code and it worked as well:
import plotly.express as px
import pandas as pd
from dash import Dash, html, dcc
app = Dash()
df_hourly_summed = pd.read_csv('data_hourly_renamed.csv', parse_dates=['time'])
def plotseries(
df,
y,
x=None,
color: str = None,
line_dash_sequence=None,
title="",
facet_row=None,
facet_col=None,
vary_style=False,
height=None,
markers: bool = False,
):
"""Line-plot using plotly express."""
x_ = df.index if x is None else x
fig = px.line(
df,
x=x_,
y=y,
title=title,
color=color,
line_dash_sequence=line_dash_sequence,
line_dash=color if vary_style else None,
facet_row=facet_row,
facet_col=facet_col,
markers=markers,
)
fig.update_layout(height=height)
return fig
fig = plotseries(
df_hourly_summed,
x='time',
y='y1',
color='categ',
title="My title",
)
# fig.show()
app.layout = html.Div([
dcc.Graph(figure=fig)
])
if __name__ == '__main__':
app.run_server(debug=True)
Indeed I also have no problem plotting this. I think the problem is on the app side (seems to be correlated to the number of plots).