Pandas dataframe bars don't show when app is deployed

[sanjin-lebesgue]

Hi! I am a young programmer building my first Streamlit app and I have added a feature of bars inside of dataframe like in the picture below. When I run the app locally, it looks fine; however, when app is deployed, bars don’t show. Here is also a slice of code for creating styled tables I use:

    green = "#8BEDBE"
    yellow = "#F1F114"
    red = "#E76350"

    idx = ["positive", "neutral", "negative"]
    colors = [green, yellow, red]

    for target in ["ctr", "cr"]:
        target_max = df.loc[idx, target].max()
        for row, color in zip(idx, colors):
            df_style = df_style.bar(
                subset=(row, target), axis=0, width=70, color=color, vmin=0, vmax=target_max
            )

Thanks for any help in advance!

[snehankekre]

Hi @sanjin-lebesgue, welcome to the community!!

The release of Streamlit 1.10.0 included a redesigned st.dataframe with a new backend to support interactivity. The changes also mean that certain pandas styling features won’t work out of the box.

It works locally because you have an earlier version of Streamlit installed, while the latest version is installed on Cloud.

Solution

To get styling to work with Streamlit 1.10.0, convert the styled dataframe to HTML, and pass the converted dataframe to st.write(, unsafe_allow_html=True). In your example, add the following additional line outside the for loops:

st.write(df_style.to_html(escape=False), unsafe_allow_html=True)

Example

Here’s a reproducible code example:

import streamlit as st
import numpy as np
import pandas as pd

df = pd.DataFrame(columns=['ctr', 'cr'])
df['ctr'] = [16.09, 66.67, 17.04, 174]
df['cr'] = [27.04, 69.81, 3.14, 159]
df.index = ['positive', 'neutral', 'negative', 'total_shops']

st.write(df)

green = "#8BEDBE"
yellow = "#F1F114"
red = "#E76350"

idx = ["positive", "neutral", "negative"]
colors = [green, yellow, red]

df_style = df.style

for target in ["ctr", "cr"]:
    target_max = df.loc[idx, target].max()
    for row, color in zip(idx, colors):
        df_style = df_style.bar(
            subset=(row, target), axis=0, width=70, color=color, vmin=0, vmax=target_max
        )

st.write(df_style.to_html(escape=False), unsafe_allow_html=True)

Output

Happy Streamlit-ing!
Snehan

[sanjin-lebesgue]

Thanks very much!

[HHest]

Hi @snehankekre, do you know if there is any plan to support “bar” in st.dataframe itself please? st.dataframe offers many nice capabilities, but I’ve been unable to switch to it because of our user base likes the “bar” feature. Thanks.