Traffic light for values

Using Streamlit
1

Hi everyone!

I’m looking for a way to create a traffic light system in my application.
Actually I calculate some KPI I’d like to highlight the background (or the text) according to the value.
For example, let assume the happiness index is from 0% to 100%, so 0% is absolute red, 50% is yellow and 100% is absolute green.

Do you know a way to do this?
Thank you for your time :slight_smile:

2

Hey @jgodoy,

First Welcome to the Streamlit Community! :partying_face: :partying_face: :partying_face: :tada: :tada: :tada: :tada: :tada:

I have a solution on how to do this! If you use st.markdown with the unsafe_allow_html=True, then you can pass css code to st.markdown to change text colour! I made an example for you that will change text color based on a slider value of 0-100 (the 0% to 100% in your example).

This code used the color package which you can install in your environment with either pip or conda by using:
pip install colour
conda install -c conda-forge colour

Check out my working example:

import streamlit as st
from colour import Color

st.title("Font Colour based on parameter")

percent = st.slider("Percent value", 0,100)

color_range = list(Color("red").range_to(Color("green"),101))

st.markdown("<font color=%s>THIS TEXT WILL CHANGE COLOR</font>" \
 %color_range[percent], unsafe_allow_html=True)

This gives:
app · Streamlit

Happy Streamlit-ing!
Marisa

P.S. if you want to know more I found this helpful Stack exchange link that has lots of references and other “true” 2 colour gradient options

2 Likes