How to Visualize Charts Side by Side in Streamlit App?

Introduction

Streamlit is a popular Python library that allows you to create interactive web applications for data analysis and visualization even if you know nothing about HTML, CSS or Javascript.

One of the features of Streamlit is that you can easily display multiple charts on the same page using. However, sometimes you may want to arrange your charts in a more customized layout, such as side by side or in a grid.

In this article, we will show you how to do that using the streamlit.columns function.

What is streamlit.columns?

The streamlit.columns function allows you to create multiple columns in your Streamlit app and place different elements inside each column. For example, you can use it to display text, images, widgets, or charts in a horizontal layout.

The syntax of the streamlit.columns function is as follows:

import streamlit as st
cols = st.columns(number_of_columns)

The function returns a list of streamlit.container objects, which are placeholders for the elements that you want to display in each column.

The length of the list is equal to the number of columns that you specify as an argument. You can access each column by indexing the list, and then use the write, image, pyplot, or other functions to add elements to the column.

How to visualize charts side by side using st.columns?

To visualize charts side by side using st.columns, we will create a Plotly figure object for each chart that you want to display, and then use the st.plotly_chart function to render the figure in the corresponding column .

For example, suppose you have two pandas dataframes, df1 and df2, that contain some data about sales and profits of different products. You want to create a bar chart for each dataframe and display them side by side in your Streamlit app. You can do that using the following code:

import streamlit as st
import pandas as pd
import plotly.express as px

st.set_page_config(layout="wide")
st.title("My App")

# Create some sample data
df1 = pd.DataFrame({
    "Product": ["A", "B", "C", "D"],
    "Sales": [100, 200, 300, 400]
})

df2 = pd.DataFrame({
    "Product": ["A", "B", "C", "D"],
    "Profit": [10, 20, 30, 40]
})

# Create two columns
cols = st.columns(2)

# create chart for the first dataset
fig1 = px.bar(df1, x="Product", y="Sales")

# add 1st chart to 1st column
cols[0].plotly_chart(fig1)

# create chart for the second dataset
fig2 = px.bar(df2, x="Product", y="Profit")

# add 2nd chart to 2nd column
cols[1].plotly_chart(fig2)

Save this Python code as ‘app.py’ and then in the terminal use the command ‘streamlit run app.py’ to run the streamlit app. The web app will appear with two bar charts stacked side by side.

You can also adjust the width of each column by passing a list of numbers as an argument to the st.columns function. The numbers represent the relative width of each column. For example, if you want the first column to be twice as wide as the second column, you can use:

cols = st.columns([2, 1])

Key Takeaways

I hope this article was helpful for you. If you have any questions or feedback, please let me know. Thank you for reading! 😊