Displaying bar charts based on input values from tabular column

[keshav_dk]

Hi,
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

[edsaac]

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)

[CarlosSerrano]

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

[keshav_dk]

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

[keshav_dk]

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

I will try on this code.