Change metric color, font, background and style

šŸŽˆ Using Streamlit
1

How can I change the metric box color and the inside font color?

2

I figured it out:
create a style. css file and get the metricā€™s css class name by inspecting the metric element.

/* metric styling */
div.css-rikpzh.e1tzin5v3{
			background-color: rgba(28, 131, 225, 0.1);
			border: 1px solid rgba(28, 131, 225, 0.1);
			padding: 5% 5% 5% 10%;
			border-radius: 5px;
			color: rgb(30, 103, 119);
			overflow-wrap: break-word;
		}
/* breakline for metric text		 */
div.css-1ht1j8u{
			overflow-wrap: break-word;
			white-space: break-spaces;
		}

and in app.py

with open ('style.css') as f:
			st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
st.metric(label="This is a very very very very very long sentence", value="70 Ā°F")
1 Like
3

I donā€™t believe this solution is stable as the classes, e.g., css-rikpzh e1tzin5v3, are not stable. They appear to be dynamically generated class names. Having said that, itā€™s all we have.

4

@asehmi Does that mean the class names may suddenly change? What triggers the change?

5

Not sureā€¦ but this issue has always been cited as a caveat of these CSS hacks.

1 Like
6

A new version will change the dynamically generated CSS classes.
Generally CSS classes that start with st or div attributes are considered a bit more stable because they are manually implemented. They may change on a version where the devs decide to change style guide, though this shouldnā€™t happen often.

import streamlit as st

st.markdown("""
<style>
div[data-testid="metric-container"] {
   background-color: rgba(28, 131, 225, 0.1);
   border: 1px solid rgba(28, 131, 225, 0.1);
   padding: 5% 5% 5% 10%;
   border-radius: 5px;
   color: rgb(30, 103, 119);
   overflow-wrap: break-word;
}

/* breakline for metric text         */
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
   overflow-wrap: break-word;
   white-space: break-spaces;
   color: red;
}
</style>
"""
, unsafe_allow_html=True)

st.metric(label="This is a very very very very very long sentence", value="70 Ā°F")

Have a nice day!
Fanilo

4 Likes
7

Good to know @andfanilo! So this is why some divs have a data-testid attribute. :thinking: Agree with you, and Iā€™ve been using the st* div containers where I can.

8

One more question: @andfanilo
why isnā€™t the stMetricValue working for me?

/* breakline for metric text		 */
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
			overflow-wrap: break-word;
			white-space: break-spaces;
			
		}

div[data-testid="metric-container"] > label[data-testid="stMetricValue"] > div {
			font-size: large;
}
9

Hello,

would you please tell me how to put a thousand separators in metric value?

metric

10

@R_D The reason this isnā€™t working is that the item with testid = stMetricValue isnā€™t a label, itā€™s a div (at least currently)

11

Hello all,
Iā€™m new here.
I found this topic really interesting for my project.
I would like to ask you, if anyone knows, if it is possible and how to change the colour of one specific container on the basis of a condition.
Example: if the value of the metric is higher than a certain threshold, the colour of the container (or its number) should become red. All the others should not change.
Thank you to everyone will reply to my question. :slight_smile:

1 Like
12

I have the same question :slight_smile:

13

Hello,
This code is very helpful! I just wonder, is it possible to change the font size of ā€œstMetricLabelā€? When I add font-size: 100%, nothing happens.

st.markdown("""
<style>
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
   overflow-wrap: break-word;
   white-space: break-spaces;
   color: red;
   font-size: 100%;
}
</style>
"""
, unsafe_allow_html=True)```
14

Hi @panda_mv, welcome to the forum!

The reason itā€™s not working is that there is a more specific selector that is overriding the changes youā€™re trying to make to the font size.

You can fix this by specifying the styling on the p tag inside the div, and using !important

import streamlit as st

st.markdown(
    """
<style>
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
   overflow-wrap: break-word;
   white-space: break-spaces;
   color: red;
}
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div p {
   font-size: 200% !important;
}
</style>
""",
    unsafe_allow_html=True,
)

st.metric("Value!", 1.2, 1.0)
2 Likes
15

Thanks a lot for the quick reply!!! Itā€™s working :upside_down_face:

16

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