Dynamic max value for bootstrap progress bar

Dash Python
1

I added a progress bar in my app, using this bootstrap component. Specifically, the “Multiple Bars” approach where I have several child bars making up the total bar. By default, the max keyword argument is set to 100. What I would like to do is return a max value in a callback that is the sum of values I’m passing to each child bars. Something like this:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = html.Div(
    [
        # assume some kind of input(s)
        html.Div(id='progress-bar')
    ]
)


@app.callback(
    Output('progress-bar', 'children'),
    # Some input(s)
)
def progress_bar(inputs):
    
    return dbc.Progress(
        [
            dbc.Progress(value=value_1, color="success", bar=True),
            dbc.Progress(value=value_2, color="primary", bar=True),
            dbc.Progress(value=value_3, color="warning", bar=True)
        ],
        multi=True,
        max = value_1 + value_2 + value_3  # This is what I want to do! Where values become proportional and bar is always full (without gray / missing colors)
    )

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

This will render a bar, but there will still be gray space if the sum of the values is less than 100 (i.e. the max is always 100 and not the sum of the child values.) Any thoughts of how to accomplish this? If I first convert my values to a % of their sum before passing them to each Progress value, it still doesn’t accomplish the desired effect.

1 Like
2

Solved. Need to sum all values together as a new variable, let’s call it total, and pass that as the max value inside each child bar.

total = val1 + val2 + val3

dbc.Progress(
	[
		dbc.Progress(value=val1, color="success", bar=True, max=total),
		dbc.Progress(value=val2, color="primary", bar=True, max=total),
		dbc.Progress(value=val3, color="warning", bar=True, max=total)
	],
	multi=True
)