Displaying bar charts based on input values from tabular column

I have 10 data(rows) in table with 3 input columns and 4 output columns as shown in the attached image.

Based on the each row of the table, I am able to display the corresponding bar chart on the web page one below the other.

I wanted to re-arrange the those 10 bar charts as shown in the 2nd image below

Here is an idea combining st.columns with itertools.cycle.

import streamlit as st
import numpy as np
import pandas as pd
from itertools import cycle
import matplotlib.pyplot as plt

N_ROWS = 10
N_COLS = 4

data = pd.DataFrame({f"Column {i}": np.random.random(N_ROWS) for i in range(N_COLS)})
x = np.arange(N_COLS)

st.dataframe(data, use_container_width=True)

cols = st.columns(3)
cols_cycle = cycle(cols)

for col, (k, row) in zip(cols_cycle, data.iterrows()):
    with col:
        fig, ax = plt.subplots(figsize=[3, 2])
        ax.bar(x, row, fc="None", ec="purple")
        ax.set_title(f"Row {k}")
        ax.set_ylim(0, 1)
        ax.spines[["top", "right"]].set_visible(False)
        st.pyplot(fig, use_container_width=True)

@keshav_dk You can use pandas melt and Altair faceted charts to achieve this fairly simply. Attached is an example created for you.

1 Like

Thank you very much @edsaac for the reply.
I will work on this code.

Thank you @CarlosSerrano for the reply and the example you have shown.

I will try on this code.