How to give bg color to specific text within a string - returned from callback

Dash Python
4

Hi @yogi_dhiman, why would have “4” a red background? What is the underlying logic? Up to now I thought, a negative value gets a red background. The following code would do this:

import numpy as np
from dash import Dash, Input, Output, html
from dash.exceptions import PreventUpdate

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Button(
            'create value',
            id='btn'
        ),
        html.Div(id='dump')

    ]
)


@app.callback(
    Output('dump', 'children'),
    Input('btn', 'n_clicks'),
)
def start_interval(click):
    if not click:
        raise PreventUpdate
    
    my_dict = {0: 4, 1: 3, 2: -1}
    return create_div(my_dict)


def create_div(my_dict):
    out = [
        html.Span(
            content,
            style={
                'height': '60px',
                'background-color': ['green', 'red'][content < 0],
                'font-size': 60,
                'text-align': 'center',
            },
        ) for content in my_dict.values()
    ]
    return out


if __name__ == "__main__":
    app.run(debug=True)

grafik
mred layout

2 Likes