Help with Emoji Rendering and Circular Progress Indicators Alignment in Streamlit

Using Streamlit
, ,
1

I am currently working on a Streamlit app where I display circular progress indicators for hotel attributes (like cleanliness, amenities) and show top emotions with their corresponding emojis.

I am facing two issues:

  1. Emoji Rendering Issue:
    I am using the emotion_to_emoji dictionary to map emotions to emojis, but when I display them, the emojis are not rendering properly. Only the text appears without the emoji.Example:

top_emotions = [“Joy”, “Trust”, “Anticipation”]
emotion_text = “, “.join([f”{emotion} {emotion_to_emoji.get(emotion, ‘’)}” for emotion in top_emotions])
st.write(emotion_text)


2.*Expected Output**: "Joy 😊, Trust 🤝, Anticipation 🤔"
3.*What happens**: Only emotion names appear, no emojis.
4. **Circular Progress Indicators Alignment**:
I am using **Matplotlib** to display circular progress indicators next to a **DataFrame** with aspect scores. The charts are misaligned and skewed.Example:


fig, ax = plt.subplots(figsize=(2.5, 2.5))
ax.pie([score, 100 - score], labels=[f"{aspect}", ""], colors=["#90EE90", "#D3D3D3"], startangle=90)
ax.set_title(f"{aspect} Score: {score}")
st.pyplot(fig)

5.*Expected Output**: Neatly aligned circular charts next to the DataFrame.
6.*What happens**: The charts are skewed and not aligned correctly.


**What I've Tried**:

* For the emoji rendering, I used `st.write()` and `st.markdown()` with HTML formatting, but the emojis don’t show up.
* For the circular charts, I used `st.columns()` to align them, but they are still misaligned.


**Can anyone help with these?**

1. How can I render **emojis** correctly next to emotions in Streamlit?
2. What’s the best way to **align circular progress charts** side by side in Streamlit (next to a DataFrame)?

Thanks in advance for your help!

Python 3.9.11 
Streamlit, version 1.41.1