Py.Cafe

giselle.pomodor/

streamlit-center-title-with-css

Stacked Bar Chart Visualization with Streamlit and Plotly

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import streamlit as st
import plotly.graph_objects as go
import pandas as pd

# Sample data
data = {
    'Category': ['A', 'B', 'C', 'D'],
    'Value1': [10, 15, 20, 25],
    'Value2': [20, 25, 30, 35],
    'Value3': [30, 35, 40, 45]
}

df = pd.DataFrame(data)

# Create a stacked bar chart using Plotly
fig = go.Figure(data=[
    go.Bar(name='Value1', x=df['Category'], y=df['Value1'], marker_color='red'),
    go.Bar(name='Value2', x=df['Category'], y=df['Value2'], marker_color='lightblue'),
    go.Bar(name='Value3', x=df['Category'], y=df['Value3'], marker_color='blue')
])

# Change the bar mode to 'stack'
fig.update_layout(barmode='stack', title='Stacked Bar Chart')

# Custom CSS to align the title
st.markdown(
    """
    <style>
    .title {
        text-align: center;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Streamlit app with custom CSS class for the title
st.markdown('<h1 class="title">Stacked Bar Chart using Plotly and Streamlit</h1>', unsafe_allow_html=True)
st.plotly_chart(fig)