Legend and hover data are not visible properly

🧩 Streamlit Components
1

Summary
The legend and hover data cannot be seen in my streamlit app when displaying a plotly express graph.

image
image2163×445 26.7 KB

image
image2130×473 29.5 KB

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
2

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

3

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

image
image986×319 16.8 KB

1 Like
4

Sure.

Can you send us the full code please?

Charly

5

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

6

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 :slight_smile:

Charly