How do I style certain words in the children attribute when a callback is performed in Dash?

Question

I am curious if it's possible to style certain words in the children attribute in dash.

My text is part of the children attribute because I have a callback that updates the text. However, I'd like to only bold the words before the colon, not the entire text. I can't seem to figure out an elegant way to do this in Dash.

What I have look's like Take Home Pay Total: 500 What I'd like it to look like Take Home Pay Total: 500

current code

html.Div([
    html.Div([
        html.Div(id='total-pay',
                children='',
                style={'font-weight': 'bold'}
        ),
    ], className='six columns'),
], className='row'),

@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
    def dataview_text(start_date, end_date):
        df = df_paystub
        df = df[(df['Date'] >= start_date) & (df['Date'] <= end_date)]
        totalpay = 'Take Home Pay Total: ' + str(round(df['CheckTotal'].sum(),2))
        return totalpay

Thanks!

Answer 1

Here is one way to do it:

totalpay = html.P(children=[
        html.Strong('Take Home Pay Total: '),
        html.Span(str(round(df['CheckTotal'].sum(),2)))
    ])
return totalpay

You could also use dcc.Markdown if you want to use markdown styling.

Answer 2

You can easily achieve this using dash_dangerously_set_inner_html package in python, there could be other better ways to render the inner react HTML component like this, but I have not found one for python so far.

Here is the sample code using `dash_dangerously_set_inner_html``` package.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from datetime import datetime as dt
import dash_dangerously_set_inner_html

import pandas as pd
import plotly.graph_objs as go


app = dash.Dash(__name__)

#main div
app.layout = html.Div([
    dcc.DatePickerRange(
        id='date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2019, 9, 19),
        initial_visible_month=dt(2017, 8, 5),
        end_date=dt(2017, 8, 25)
    ),
    html.Div([
        html.Div([
            html.Div(id='total-pay',
                children='',
                #style={'font-weight': 'bold'}
            ),
        ], className='six columns'),
    ], className='row'),

])


@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
def dataview_text(start_date, end_date):
    return dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
         <b>Take Home Pay Total: </b>
    ''' + str(round(1000,2)))

if __name__ == '__main__':
    app.run_server(debug=True)