Knob Examples and Reference


Default Knob

An example of a default Knob without any extra properties.

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Knob(id='my-knob-1'),
    html.Div(id='knob-output-1')
])

@app.callback(Output('knob-output-1', 'children'), Input('my-knob-1', 'value'))
def update_output(value):
    return 'The knob value is {}.'.format(value)

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

Size

Set the size(diameter) of the knob in pixels with size.

import dash_daq as daq

daq.Knob(
    size=140,
    value=3
)

Max

Set the maximum value of the knob using max.

import dash_daq as daq

daq.Knob(
    max=100,
    value=3
)

Color Ranges

Control color ranges with:

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

daq.Knob(
  label="Color Ranges",
  value=3,
  color={"ranges":{"green":[0,5],"yellow":[5,9],"red":[9,10]}}
)

Color Gradient

Set up a color gradient with:

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

daq.Knob(
  label="Gradient Ranges",
  value=7,
  color={"gradient":True,"ranges":{"green":[0,5],"yellow":[5,9],"red":[9,10]}}
)

Scale

Adjust the scale interval, label interval, and start of the scale with scale.

import dash_daq as daq

daq.Knob(
  label="Scale",
  value=7,
  max=18,
  scale={'start':0, 'labelInterval': 3, 'interval': 3}
)

Knob Properties

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

help(dash_daq.Knob)
```

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.

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

color (dict; optional):
Color configuration for the knob’s track.

color is a string | dict with keys:

  • default (string; optional):
    Color used for current value text and other minor accents.

  • gradient (boolean; optional):
    Display ranges as a gradient between given colors.

  • ranges (dict; optional):
    Define multiple color ranges on the knob’s track. The key
    determines the color of the range and the value is the
    start,end of the range itself. Ranges must be contiguous along
    the entirety of the knob’s range of values.

    ranges is a dict with keys:

    • color (list of numbers; optional)

disabled (boolean; optional):
If True, knob cannot be moved.

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’, ‘bottom’; default 'top'):
Where the knob label is positioned.

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

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

persisted_props (list of a value equal to: ‘value’s; default \['value'\]):
Properties whose user interactions will persist after refreshing
the component or the page. Since only value is allowed this prop
can normally be ignored.

persistence (boolean | string | number; optional):
Used to allow user interactions in this component to be persisted
when the component - or the page - is refreshed. If persisted is
truthy and hasn’t changed from its previous value, a value that
the user has changed while using the app will keep that change, as
long as the new value also matches what was given originally.
Used in conjunction with persistence_type.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data
is cleared once the browser quit.

scale (dict; optional):
Configuration for the component scale.

scale is a dict with keys:

  • custom (dict; optional):
    Custom scale marks. The key determines the position and the
    value determines what will show. If you want to set the style
    of a specific mark point, the value should be an object which
    contains style and label properties.

    custom is a number

    Or dict with keys:

    • label (string; optional)

    • style (string; optional)

  • interval (number; optional):
    Interval by which the scale goes up. Attempts to dynamically
    divide min-max range by default.

  • labelInterval (number; optional):
    Interval by which labels are added to scale marks. Defaults to
    2 (every other mark has a label).

  • start (number; optional):
    Value to start the scale from. Defaults to min.

size (number; optional):
The size (diameter) of the knob in pixels.

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 knob.