Graduated bar Examples and Reference


Default Graduated bar

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

import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

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


@app.callback(
    dash.dependencies.Output('my-graduated-bar', 'value'),
    [dash.dependencies.Input('my-graduated-bar-slider', 'value')]
)
def update_output(value):
    return value


if __name__ == '__main__':
    app.run_server(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
)  

Graduated Bar 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

color (dict; default light.primary): Color configuration for the graduated bar’s progress blocks. color has the following type: string | dict containing keys ‘default’, ‘gradient’, ‘ranges’. Those keys have the following types:

  • 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 has the following type: dict containing keys ‘color’. Those keys have the following types: - color (list of numbers; optional)

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

label (dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional)

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

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

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

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

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

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

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

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

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