Plotly charts sizing / overlap with other elements

Using Streamlit
1

Hi everyone,

not necessarily a question rather a workaround I found for using Plotly charts in Streamlit apps.
When I use Plotly without any sizing guidance, legend usually covers the chart and it is oddly distorted.
Moreover, it often overlaps with the st.subheader() and other elements below it.

My workaround was to set the size of the chart twice:

  • once in the Plotly object (eg, fig.update_layout(width=1100,height=900) ) - this one actually changes the size of the plot, so it’s readable
  • and then in the Streamlit command (eg, `st.plotly_chart(fig,width=1100,height=900) ) - this one moves all the subsequent elements below the Plotly chart (no more overlapping!)

I’ve tried using only the Streamlit command, but it wasn’t actually changing the Plotly figure size.

I hope it helps.

1 Like
2

Hi @svilupp, can you provide some example code? I can’t reproduce this issue…

3

I didn’t even realize that was an option, just thought the size of my plotly charts was off…here is an example – with this code (I can provide more if needed)

fig.update_layout(height=800)

st.plotly_chart(fig,height=800)
st.plotly_chart(fig)

I get the following result:

image
image690×1236 69.3 KB

As you can see, the top one has the correct height, the bottom one reverts to whatever the default is (maybe 400?)

4

Hi @aaroncolesmith -

Providing a full example would be helpful, as it’s not clear to me what your question is. Are you expecting both charts to be the same size, persisting the height across calls?

Best,
Randy

5

Hi @randyzwitch,
Yes, in my example, I’m expecting both charts to be the same size.

And now that I rechecked this, they both are the same size when I run locally, but when I deploy to heroku, the second chart (st.plotly_chart(fig)) gets resized back down…so it may be a separate issue.

Here is an extended look at the code … if you need to run a file through, I uploaded an example here.

d = pd.read_csv('./test.csv')
fig=px.bar(d.sort_values('WSPS',ascending=True),
       y='Player',
       x='WSPS',
           title='Win Shares Per Season (WSPS) by Player',
           hover_data=['Pk','Redraft','Tm','College'],
       orientation='h'
      )

fig.update_yaxes(tickfont=dict(size=8))
fig.update_xaxes(tickfont=dict(size=8))

fig.update_layout(height=800)

st.plotly_chart(fig,height=800)
st.plotly_chart(fig)
2 Likes