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.