# Dynamic max value for bootstrap progress bar

**URL:** <https://community.plotly.com/t/dynamic-max-value-for-bootstrap-progress-bar/56528>\
**Category:** Dash Python\
**Created:** [September 12, 2021, 12:57am UTC](https://community.plotly.com/t/dynamic-max-value-for-bootstrap-progress-bar/56528 "2021-09-12T00:57:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nlyle](https://avatars.discourse-cdn.com/v4/letter/n/c2a13f/32.png) [@nlyle](https://community.plotly.com/u/nlyle)\
**Post date:** [September 12, 2021, 12:57am UTC](https://community.plotly.com/t/dynamic-max-value-for-bootstrap-progress-bar/56528/1 "2021-09-12T00:57:30Z")

</div>

I added a progress bar in my app, using [this bootstrap component](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/progress/). 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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![nlyle](https://avatars.discourse-cdn.com/v4/letter/n/c2a13f/32.png) [@nlyle](https://community.plotly.com/u/nlyle)\
**Post date:** [September 12, 2021, 6:27am UTC](https://community.plotly.com/t/dynamic-max-value-for-bootstrap-progress-bar/56528/2 "2021-09-12T06:27:18Z")

</div>

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.

```auto
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
)

```