Aligning dataframe with plotly chart

I am attempting to use the new ‘Beta_Columns’ to have a dataframe side by side with the plotly chart. However, they are not aligned perfectly and was wondering what the best way to do that would be.

Code:
col5, col6 = st.beta_columns((1,1))
with col5:
st.dataframe(stock_recom2)
with col6:
fig = px.pie(stock_recom3, values=‘Firm’, names=‘To Grade’, title=‘Distribution by Recommendations’)
st.plotly_chart(fig, use_container_width=True)

Hey @tcbrowne,

Welcome to the Streamlit Community! :partying_face: :partying_face: :tada: :tada:

When you say that they are not aligned perfectly, do you mean that the bottom of the graph extends beyond the table on the right?

If you’re talking about how your title of the st.plotly_chart doesn’t line up with the column names from your data: I would say this is likely due to some padding on the figure itself. See the set of media I made in columns:


The tops will always line up but the bottoms are dictated by the size of the figure!

To line up the bottom: You can get around this by changing the size of one of the components in your columns, because it’s not currently supported

To line up the tops: I would remove the title from the plotly graph and put st.write('Distribution by Recommendations') before your graph!

Happy Streamlit-ing!
Marisa

Hi Marisa! Yes the bottom was the issue and your response is exactly what I was looking for. Changed the size of one of the dataframe and it looks good now. Thanks for the help!

1 Like

Awesome! So glad I can help!