How do I have multiple styling effects for the same div in the callback? Here I am trying to have two different colors for the 'Active Departments…" div. I need everything before and after the “:” to be in different colors (as shown in default div). Using the callback I am only able to update the style of the entire div to one color.
#Default div
html.Div([html.Span('Active Departments in 2020:',
style={'color': 'rgb(0, 156, 222)'}), ' {}'.format(deptCount)], id='dept-stats', style = {'max-width': '25%', 'display': 'inline-block' , 'position':'absolute', 'color':'rgb(0, 48, 135)', 'margin-top': '10px'}),
@app.callback(
[dash.dependencies.Output('scatter-plot', 'figure'),
dash.dependencies.Output('dept-stats', 'children'),
dash.dependencies.Output('dept-stats', 'style')],
[dash.dependencies.Input('year-dropdown', 'value'),
dash.dependencies.Input('month-dropdown', 'value'),
dash.dependencies.Input('status-dropdown', 'value'),
dash.dependencies.Input('button_chart', 'n_clicks_timestamp')])
def update_graph(year, month, status, clicks):
.... #some functionality to calculte {} values go here...
return fig, 'Active Departments in {} {}: {}'.format(month, year, deptCount), {'color': 'rgb(0, 48, 135)'}