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':{
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;],
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;],
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;]
    }
}

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':{
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;],
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;],
        '&lt;color&gt;':[&lt;value&gt;, &lt;value&gt;]
    }
}

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.