Graduated bar Examples and Reference


Default Graduated bar

An example of a default Graduated bar without any extra properties.

from dash import Dash, html, dcc, Input, Output, callback
import dash_daq as daq


app = Dash(__name__)

app.layout = html.Div([
    daq.GraduatedBar(
        id='my-graduated-bar-1',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='my-graduated-bar-slider-1',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])

@callback(
    Output('my-graduated-bar-1', 'value'),
    Input('my-graduated-bar-slider-1', 'value')
)
def update_output(value):
    return value

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

Orientation

Change the orientation of the bar to vertical vertical=True.

import dash_daq as daq

daq.GraduatedBar(
    vertical=True,
    value=10
)

Size

Manually adjust the size of the bar in pixels with size.

import dash_daq as daq

daq.GraduatedBar(
    size=200,
    value=10
)

Max

Manually set a maximum value with max.

import dash_daq as daq

daq.GraduatedBar(
    max=100,
    value=50
)

Step

Manually set the step size of each bar with step.

import dash_daq as daq

daq.GraduatedBar(
    step=2,
    max=100,
    value=50
)

Show Current Value

Display the current value of the graduated bar with showCurrentValue=True.

import dash_daq as daq

daq.GraduatedBar(
    showCurrentValue=True,
    max=100,
    value=38
)

Color Range

Set a color range with:

color={
    'ranges':{
        '<color>':[<value>, <value>],
        '<color>':[<value>, <value>],
        '<color>':[<value>, <value>]
    }
}
import dash_daq as daq

daq.GraduatedBar(
    color={"ranges":{"green":[0,4],"yellow":[4,7],"red":[7,10]}},
    showCurrentValue=True,
    value=10
)

Color Gradient

Set a color gradient with:

color={
    'gradient':True,
    'ranges':{
        '<color>':[<value>, <value>],
        '<color>':[<value>, <value>],
        '<color>':[<value>, <value>]
    }
}
import dash_daq as daq

daq.GraduatedBar(
    color={"gradient":True,"ranges":{"green":[0,4],"yellow":[4,7],"red":[7,10]}},
    showCurrentValue=True,
    value=10
)

GraduatedBar Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.GraduatedBar)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (string; optional):
The ID used to identify this compnent in Dash callbacks.

value (number; optional):
The value of the graduated bar.

color (dict; default light.primary):
Color configuration for the graduated bar’s progress blocks.

color is a string | dict with keys:

  • default (string; optional):
    Fallback color to use when color.ranges has gaps.

  • gradient (boolean; optional):
    Display ranges as a gradient between given colors. Requires
    color.ranges to be contiguous along the entirety of the graduated
    bar’s range of values.

  • ranges (dict; optional):
    Define multiple color ranges on the graduated bar’s track. The key
    determines the color of the range and the value is the start,end
    of the range itself.

    ranges is a dict with keys:

    • color (list of numbers; optional)

size (number; default 250):
The size (length) of the graduated bar in pixels.

vertical (boolean; optional):
If True, will display bar vertically instead of horizontally.

min (number; default 0):
The minimum value of the graduated bar.

max (number; default 10):
The maximum value of the graduated bar.

step (number; default 0.5):
Value by which progress blocks appear.

showCurrentValue (boolean; optional):
If True, the current percentage of the bar will be displayed.

theme (dict; default light):
Theme configuration to be set by a ThemeProvider.

label (dict; optional):
Description to be displayed alongside the control. To control styling,
pass an object with label and style properties.

label is a string | dict with keys:

  • label (string; optional)

  • style (dict; optional)

labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'top'):
Where the component label is positioned.

className (string; optional):
Class to apply to the root component element.

style (dict; optional):
Style to apply to the root component element.