Plotly Dash, Html Component, html.P conditional color

[hcevahir34]

Hi,

In my python plotly -dash project, I ve an calculated area named ‘perc1’. I’ve managed to print my value on localhost: 127.0.0.1:8055/ 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%)

[celia]

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
perc2=70
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
])

app.run_server(debug=True)

Hope this helps!

[hcevahir34]

Thank you for helps celia