Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Multiple styling changes in callback

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'}),

    [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)'}