How to control Streamlit metric labels and values size?

Using Streamlit
,
1

Hi everyone,

I’m trying to increase the size of both labels and values in Streamlit metrics. I’ve tried various CSS approaches but haven’t found a reliable solution.

What I’ve tried:

st.markdown("""
    <style>
    [data-testid="stMetricLabel"] {
        font-size: 60px;
    }
    
    [data-testid="stMetricValue"] {
        font-size: 30px;
    }
    </style>
""", unsafe_allow_html=True)

Environment:
Streamlit version: 1.41.0
Deployment: Both local and Railway cloud deployment

The label selector ([data-testid="stMetricLabel"]) seems to work, but I can’t get the metric value size to change. I’ve also tried:

Current behavior:

  • Label size changes successfully
  • Value size remains unchanged regardless of CSS

Desired behavior:

  • Ability to control both label and value sizes independently

Is there a recommended way to achieve this? Thank you in advance :slight_smile:

2

Try targeting explicitly the p tag inside that div

[data-testid="stMetricLabel"] p {
    font-size: 3rem;
}
1 Like
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.