how to create columns in streamlit and plotly with python?

Question

I am creating a dashboard using the new web app for data science streamlit with coordination with plotly. In streamlit there is an ability to create Grid Layout by separating components with columns and you can adjust the size of the columns as you need, using this statement: col1,col2,col3 = st.beta_columns(3)

the problem is that when i tried this option the charts are displayed on each other like so :

where it must display the pie chart beside the bar chart

code:

#Streamlit pckgs
import streamlit as st

# EDA pckgs
import pandas as pd
import numpy as np

#VIZ pckgs
import plotly.express as px
import plotly.graph_objs as go

col1,col2,col3 = st.beta_columns([2,2,2])

        data = st.file_uploader("Upload Dataset",type=["csv","xlsx","xls"])
        if data is not None:        
            #check the type of the file 
            if data.type =="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                df=pd.read_excel(data)
            elif data.type =="application/vnd.ms-excel":
                df=pd.read_csv(data)
            
            all_columns_names = df.columns.tolist()
            col = st.selectbox("Choose Column",df.columns.tolist())
            selected_column_names__pyplot = st.multiselect("Select Columns",all_columns_names)
            plot_btn = st.button("Generate Plot")
            #count plot
            with col1:
                #pie chart
                if st.checkbox("Pie Plot"):
                    if plot_btn:
                        data_pie = df[col].value_counts().to_frame()
                        labels=data_pie.index.tolist()
                        datavals=data_pie[col].tolist()
                        
                        trace=go.Pie(labels=labels,
                                    values=datavals,
                                    hovertemplate = "%{label}: 
Value: %{value} ",
                                    showlegend=True,
                                    textposition='inside',
                                    )
                        layout = go.Layout(
                        title = 'Percentage of {}'.format(col),
                        height=600,
                        margin=go.Margin(l=0, r=200, b=100, t=100, pad=4)   # Margins - Left, Right, Top Bottom, Padding
                        )
                        
                        data = [trace]
                        fig = go.Figure(data=data,layout = layout)
                        st.plotly_chart(fig)

            with col2:
                if st.checkbox("Count_plot"):
                    # all_columns_names = df.columns.tolist()
                    # s=df[all_columns_names[0]].str.strip().value_counts()
                    if plot_btn:
                        s=df[col].str.strip().value_counts()
                        trace  = go.Bar(
                                x=s.index,
                                y=s.values,
                                showlegend = True
                                )

                        layout = go.Layout(
                            title = 'Count of {}'.format(col),
                        )
                        data = [trace]
                        fig = go.Figure(data=data,layout = layout)
                        st.plotly_chart(fig)

based on the answer of---- i change this line st.plotly_chart(fig) to this line st.plotly_chart(fig, use_container_width=True)

But the charts becomes very small :

where the pie chart is in the first column and the bar chart is in the second column

user_8917426 · Answer

Use use_container_width=True while plotting

st.plotly_chart(fig, use_container_width=True)

user_14282714 · Answer

A workaround could be by creating a three-column layout where you space out the first plot (in this case 20x) to show them equally. Here is a reproducible example:

import streamlit as st
import plotly.express as px

# data
long_df = px.data.medals_long()

# figure
fig = px.bar(long_df, x="nation", y="count",
                color="medal", title="Long-Form Input")

# plots
plot1, plot2, plot3 = st.columns((20,1,1))
plot1.plotly_chart(fig)    
plot3.plotly_chart(fig)

Output:

how to create columns in streamlit and plotly with python?

code:

2 Answers