Summary
The legend and hover data cannot be seen in my streamlit app when displaying a plotly express graph.
This is my code for the graph
fig = px.line(messages_df,
x='created_date',
y='messages',
color='status')
st.plotly_chart(fig, theme="streamlit", use_container_width=True)
I also tried this:
fig = px.line(messages_df,
x='created_date',
y='messages',
color='status')
fig.update_layout(
font_color="blue",
title_font_color="red",
legend_title_font_color="green"
)
st.plotly_chart(fig, theme="streamlit", use_container_width=True)
but the problem persists.
Please assist on this if there is any better approach or i am missing out on any thing please highlight.
1 Like
Thanks, @luis.miralles!
It seems like the issue might be with the way Streamlit is rendering the Plotly figure.
Here are a few things that you might consider trying:
-
Try adjusting the figure size directly. You can do this by adding a height
and width
attribute to your update_layout
call, like so:
fig.update_layout(
autosize=False,
width=800,
height=500,
...
)
-
Changing Plotly’s legend location: This should be done with the legend
attribute in update_layout
:
fig.update_layout(
legend=dict(
yanchor="top",
y=0.99,
xanchor="left",
x=0.01
)
)
Please let us know if these work.
Thanks.
Charly
Thanks, @Charly_Wargnier ,
I have tried both tips and the result is the same, I cannot read the text in the hover or in the legend
1 Like
Sure.
Can you send us the full code please?
Charly
Of course,
I have several plots, this one is for one of them (bar plot)
fig = px.bar(messages_df, x='bucket_name', y='messages',
color='status', barmode='group',
color_discrete_map={
'OPEN': 'blue',
'CLOSED': 'red'
}, labels={
'bucket_name': ''}
)
col1.plotly_chart(fig, theme='streamlit', use_container_width=True)
then I have this for line chart
fig = make_subplots(specs=[[{"secondary_y": True}]])
fig.add_trace(
go.Line(x=messages_in_time.report_datetime, y=messages_in_time.total_open_conversations,
name="open conversations", line_color='blue'), secondary_y=False)
fig.add_trace(
go.Line(x=messages_in_time.report_datetime, y=messages_in_time.closed_conversations,
name="closed conversations", line_color='red'), secondary_y=True)
col1.plotly_chart(fig, theme="streamlit", use_container_width=True)
Thanks
Thanks @luis.miralles!
Although it would be great if you could share the complete code, preferably shared on stlite or Databutton, so we can debug directly in the browser without having to install each dependency 
Charly