Plotly Dash, Html Component, html.P conditional color


In my python plotly -dash project, I ve an calculated area named ‘perc1’. I’ve managed to print my value on localhost: via ‘html.P’ function. But now I try to print it with red or green colors. For exmple while perc1 value is greater than 0 , font-color will be green, if its less then 0 it will be red colored.

Thanks for your help!

code: html.P(f’ ({perc1:+g}%)
result: (+2.75%)

Hi @hcevahir34 !

You should be able to do that with a conditional 'style' argument in html.P, like this:

import dash
from dash import dcc, html

perc1 = -50
perc3= -35

app = dash.Dash()
app.layout = html.Div([
    html.P(f'{perc1:+g}%', style={'color':'red'}), # standard use
    html.P(f'{perc2:+g}%', style={'color':'green' if perc2 > 0 else 'red'}), # conditional use
    html.P(f'{perc3:+g}%', style={'color':'green' if perc3 > 0 else 'red'}) # conditional use


Screenshot 2022-09-05 at 10.45.24

Hope this helps!

Thank you for helps celia :slight_smile: