Legend and hover data are not visible properly

[luis.miralles]

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.

[Charly_Wargnier]

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:

1. 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,
       ...
   )
   

2. 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

[luis.miralles]

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

[Charly_Wargnier]

Sure.

Can you send us the full code please?

Charly

[luis.miralles]

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

[Charly_Wargnier]

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