Side by Side Charts in Streamlit

🎈 Using Streamlit
1

Hi Team,

I am working on a dashboard development project over streamlit, i was trying to use Dash (Pydash) but it seemed difficult as i have not understanding of CSS/HTML stuff and then thank god i met STREMLIT, seems quite user friendly and happy to explore it. What I need help is how to create section in the page e.g I need to create 2 charts side by side (horizontally).
Any help is highly appreciated !:blush::innocent:

1 Like
2

Hey @Ashish_Pandey, welcome!

Streamlit doesn’t currently support horizontal layouts like you’re looking for – but this is a highly-requested feature (including by us, internally), and it’s on our roadmap!

You can watch this Github issue to get notifications about progress on the feature.

1 Like
3

Thanks a lot for the response Tim, also i had a look over the GitHub link you have shared and found that its quite a frequent demand. I really hope to see this feature soon in Streamlit to make it holistic modelling/visualization platform. Reiterating my requirements:

  • ways to display widgets (charts, selectors…) horizontally maybe a grid can help

  • ways to create multiple pages to make a complete dashboard

Thanks for the support and highly optimistic towards this development in future :slight_smile:

2 Likes
4

Hii @Ashish_Pandey,
Actually I am still looking for a way to visualize two charts side by side in streamlit; however, in order to display two charts side by side you can easily use ordinary subplots there.
As example:
fig = plt.figure(figsize=(10, 4))
fig, axs = plt.subplots(nrows=1, ncols=2)
st.pyplot(fig)

4 Likes
5

If anyone is still wondering how to do it, I’m working on Time series Data and got to do it by using altair’s Horizontal Concatenation:

chart1 = alt.Chart(df).mark_line().encode(
    x=alt.X('date',axis=alt.Axis(format='%Y-%m',labelAngle=-20)),
    y=alt.Y('colname1',scale=alt.Scale(domain=[np.min(df.colname1), np.max(df.colname1)])), 
).properties(width=500, height=300)


chart2 = alt.Chart(df).mark_line().encode(
    x=alt.X('date',axis=alt.Axis(format='%Y-%m',labelAngle=-20)),
    y=alt.Y('colname2',scale=alt.Scale(domain=[np.min(df.colname2), np.max(df.colname2)])), 
).properties(width=500, height=300)

st.altair_chart(chart1 | chart2)
2 Likes