Dash DAQ Components

A polished set of control and indicator components for
Dash DAQ—the data acquisition GUI for Python

THEME
0246810
FLUX
0
WARNING
0
20
40
60
80
100
0246810

Quickstart

After purchasing and downloading Dash DAQ, open your terminal to install the Python library:

pip install dash_daq-x.x.x.tar.gz.

Make sure that you're in the folder where the bundle downloaded and that x.x.x matches the version of the bundle filename.

You can now import dash_daq components in your Python environment like so:

import Gauge from dash_daq

See the below for more component examples and the Dash user guide for a general intro to Dash.


Components

Dash DAQ offers 15 components in both light and dark themes. Scroll the components below to see their usage and configuration options.

BooleanSwitch

A switch component that toggles between on and off.

Examples

SAMPLE CODE
import dash_daq as daq

daq.BooleanSwitch(
  label="Default"
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
colorstringColor to highlight active switch background
dashEvents'click'
disabledbooleanIf true, switch cannot be clicked
fireEventcallbackA callback for firing events to dash.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
onbooleanWhether or not the switch is on
setPropscallbackDash-assigned callback that gets fired when switch is toggled.
styledictStyle to apply to the root component.
themedictTheme configuration to be set by a ThemeProvider
verticalbooleanIf true, switch will be vertical instead of horizontal

ColorPicker

A color picker.

Examples

SAMPLE CODE
import dash_daq as daq

daq.ColorPicker(
  label="Color Picker"
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element
disabledbooleanIf true, color cannot be picked.
idstringThe ID used to identify the color picker in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties
labelPosition'top','bottom'Where the indicator label is positioned
setPropscallbackDash-assigned callback that gets fired when the color picker's value changes
sizenumberSize (width) of the component in pixels
styledictStyle to apply to the root component element
themedictTheme configuration to be set by a ThemeProvider
valuedictColor value of the picker
value['hex']stringHex string
value['rbg']dictRGB/RGBA dict
value['rbg']['a']number
value['rbg']['b']number
value['rbg']['g']number
value['rbg']['r']number

Gauge

A Gauge component that points to a value between some range.

Examples

Component Value
0246810
0246810
4.0
100101102103104
0246810
SAMPLE CODE
import dash_daq as daq

daq.Gauge(
  label="Default",
  value=6
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
basenumberBase to be used in logarithmic scale.
classNamestringClass to apply to the root component element.
colorstring or dictColor configuration for the gauge's track.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
logarithmicbooleanIf set to true, a logarithmic scale will be used.
maxnumberThe maximum value of the gauge. If logarithmic, represents the maximum exponent.
minnumberThe minimum value of the gauge. If logarithmic, represents the minimum exponent.
scaledictConfiguration for the component scale.
scale['custom']number or dictCustom 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 a dict which contains style and label properties
scale['interval']numberInterval by which the scale goes up. Attempts to dynamically divide min-max range by default.
scale['labelInterval']numberInterval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).
scale['start']numberValue to start the scale from. Defaults to min.
showCurrentValuebooleanIf true, the current value of the gauge will be displayed
sizenumberThe size (diameter) of the gauge in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider
unitsstringLabel for the current value
valuenumberThe value of gauge. If logarithmic, the displayed value will be the logarithm of the inputted value.

GraduatedBar

A graduated bar component that displays a value within some range as a percentage.

Examples

Component Value
72%
50%
80%
SAMPLE CODE
import dash_daq as daq

daq.GraduatedBar(
  label="Default",
  value=3
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
colorstring or dictColor configuration for the graduated bar's progress blocks.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
maxnumberThe maximum value of the graduated bar
minnumberThe minimum value of the graduated bar
showCurrentValuebooleanIf true, the current percentage of the bar will be displayed
sizenumberThe size (length) of the graduated bar in pixels
stepnumberValue by which progress blocks appear
styledictStyle to apply to the root component element.
valuenumberThe value of the graduated bar
verticalbooleanIf true, will display bar vertically instead of horizontally

Indicator

A boolean indicator LED.

Examples

SAMPLE CODE
import dash_daq as daq

daq.Indicator(
  label="Default",
  value=True
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element
colorstringColor of the indicator
heightnumberHeight of the component. Set both width and height for a rectangular indicator
idstringThe ID used to identify the indicator in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties
labelPosition'top','bottom','right','left'Where the indicator label is positioned
sizenumberSize of the component. Either use this or width and height
styledictStyle to apply to the root component element
themedictTheme configuration to be set by a ThemeProvider
valuebooleanIf true, indicator is illuminated
widthnumberWidth of the component. Set both width and height for a rectangular indicator

Knob

A knob component that can be turned to a value between some range.

Examples

0246810
020406080100
0246810
0246810
SAMPLE CODE
import dash_daq as daq

daq.Knob(
  label="Default",
  value=8
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
colorstring or dictColor configuration for the knob's track.
disabledbooleanIf true, knob cannot be moved.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the knob label is positioned.
maxnumberThe maximum value of the knob
minnumberThe minimum value of the knob
scaledictConfiguration for the component scale.
scale['custom']number or dictCustom 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 a dict which contains style and label properties
scale['interval']numberInterval by which the scale goes up. Attempts to dynamically divide min-max range by default.
scale['labelInterval']numberInterval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).
scale['start']numberValue to start the scale from. Defaults to min.
setPropscallbackDash-assigned callback that gets fired when selected value changes.
sizenumberThe size (diameter) of the knob in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider
valuenumberThe value of knob

LEDDisplay

A 7-bar LED display component.

Examples

SAMPLE CODE
import dash_daq as daq

daq.LEDDisplay(
  label="Default",
  value="0.12345"
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
backgroundColorstringColor of the display's background
classNamestringClass to apply to the root component element
colorstringColor of the display
idstringThe ID used to identify the display in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties
labelPosition'top','bottom'Where the display label is positioned
sizenumberSize of the display
styledictStyle to apply to the root component element
themedictTheme configuration to be set by a ThemeProvider
valuenumber or stringValue to be displayed. A number or a string containing only digits (0-9), periods, and colons.

NumericInput

A numeric input component that can be set to a value between some range.

Examples

SAMPLE CODE
import dash_daq as daq

daq.NumericInput(
  label="Default",
  value=0
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
disabledbooleanIf true, numeric input cannot changed.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the numeric input label is positioned.
maxnumberThe maximum value of the numeric input
minnumberThe minimum value of the numeric input
setPropscallbackDash-assigned callback that gets fired when selected value changes.
sizenumberThe size (length) of the numeric input in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider
valuenumberThe value of numeric input

PowerButton

A power button component can be turned on and off.

Examples

SAMPLE CODE
import dash_daq as daq

daq.PowerButton(
  label="Default",
  on=True
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
colorstringThe indicator color to display when power button is on
dashEvents'click'
disabledbooleanIf true, power button cannot be clicked
fireEventcallbackA callback for firing events to dash.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the button. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the button label is positioned.
onbooleanWhether or not the power button is on
setPropscallbackDash-assigned callback that gets fired when button is clicked.
sizenumberThe size (diameter) of the power button in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider

PrecisionInput

A numeric input component that converts an input value to the desired precision.

Examples

1
.
2
3
4
E
3
1
.
2
E
3
SAMPLE CODE
import dash_daq as daq

daq.PrecisionInput(
  label="Default",
  precision=4,
  value=1234
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
disabledbooleanIf true, numeric input cannot be changed.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the scientific notation. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the numeric input label is positioned.
maxnumberThe maximum value of the numeric input
minnumberThe minimum value of the numeric input
precisionnumberNumber of significant figures
setPropscallbackDash-assigned callback that gets fired when selected value changes.
sizenumberThe size (length) of the numeric input in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider
valuenumberThe value of numeric input

StopButton

A Stop button component

Examples

SAMPLE CODE
import dash_daq as daq

daq.StopButton(
  label="Default"
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
buttonTextstringText displayed in the button
classNamestringClass to apply to the root component element.
dashEvents'click'
disabledbooleanIf true, button cannot be pressesd.
fireEventcallbackA callback for firing events to dash.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the button. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the label is positioned.
n_clicksnumberNumber of times the button was clicked
setPropscallbackDash-assigned callback that gets fired when the button is clicked.
sizenumberThe size (width) of the stop button in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider

Slider

A slider component with support for a target value.

Examples

VALUE
30
mark50
TARGET
SAMPLE CODE
import dash_daq as daq

daq.Slider(
  label="Default",
  value=9,
  size=240
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringAdditional CSS class for the root DOM node.
colorstring or dictColor configuration for the slider's track.
dashEvents'change'
disabledbooleanIf true, the handles can't be moved.
dotsbooleanWhen the step value is greater than 1, you can set the dots to true if you want to render the slider with dots. Note: dots are disabled automatically when using color.ranges
fireEventcallbackDash-assigned callback that gets fired when the checkbox item gets selected.
handleLabelstring or dictConfiguration of the slider handle's label. Passing falsy value will disable the label.
idstringThe ID used to identify this component in Dash callbacks
includedbooleanIf the value is true, it means a continuous value is included. Otherwise, it is an independent value.
labelPositionUnknown
marksdictMarks on the slider. 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 a dict which contains style and label properties.
marks['number']string or dict
maxnumberMaximum allowed value of the slider.
minnumberMinimum allowed value of the slider.
setPropscallbackDash-assigned callback that gets fired when the value changes.
sizenumberSize of the slider in pixels.
stepnumberValue by which increments or decrements are made.
targetsdictTargets on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific target point, the value should be a dict which contains style and label properties.
targets['number']string or dict
themedictTheme configuration to be set by a ThemeProvider
updatemode'mouseup','drag'Determines when the component should update its value. If `mouseup`, then the slider will only trigger its value when the user has finished dragging the slider. If `drag`, then the slider will update its value continuously as it is being dragged. Only use `drag` if your updates are fast.
valuenumberThe value of the input.
verticalbooleanIf true, the slider will be vertical.

Tank

A Tank component that fills to a value between some range.

Examples

Component Value
0
2
4
6
8
10
0
20
40
60
80
100
68
SAMPLE CODE
import dash_daq as daq

daq.Tank(
  label="Default",
  value=2
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
basenumberBase to be used in logarithmic scale.
classNamestringClass to apply to the root component element.
colorstringThe color of tank fill
idstringThe ID used to identify this component in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
logarithmicbooleanIf set to true, a logarithmic scale will be used.
maxnumberThe maximum value of the tank. If logarithmic, represents the maximum exponent.
minnumberThe minimum value of the tank. If logarithmic, represents minimum exponent.
scaledictConfiguration for the component scale.
scale['custom']number or dictCustom 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 a dict which contains style and label properties
scale['interval']numberInterval by which the scale goes up. Attempts to dynamically divide min-max range by default.
scale['labelInterval']numberInterval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).
scale['start']numberValue to start the scale from. Defaults to min.
showCurrentValuebooleanIf true, the current value of the tank will be displayed
sizenumberThe size (height) of the tank in pixels
styledictStyle to apply to the root component element.
unitsstringLabel for the current value
valuenumberThe value of tank. If logarithmic, the displayed value will be the logarithm of the inputted value.

Thermometer

A thermometer component that fills to a value between some range

Examples

Component Value
0
2
4
6
8
10
32
68
104
140
176
212
98.6
SAMPLE CODE
import dash_daq as daq

daq.Thermometer(
  label="Default",
  value=3
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
basenumberBase to be used in logarithmic scale.
classNamestringClass to apply to the root component element.
colorstringThe color of the thermometer fill/current value text
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dictDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
logarithmicbooleanIf set to true, a logarithmic scale will be used.
maxnumberThe maximum value of the thermometer. If logarithmic, represents the maximum exponent.
minnumberThe minimum value of the thermometer. If logarithmic, represents the minimum exponent.
scaledictConfiguration for the component scale.
scale['custom']number or dictCustom 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 a dict which contains style and label properties
scale['interval']numberInterval by which the scale goes up. Attempts to dynamically divide min-max range by default.
scale['labelInterval']numberInterval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).
scale['start']numberValue to start the scale from. Defaults to min.
showCurrentValuebooleanIf true, the current value of the thermometer will be displayed
sizenumberThe size (height) of the thermometer in pixels
styledictStyle to apply to the root component element.
themedictTheme configuration to be set by a ThemeProvider
unitsstringLabel for the current value
valuenumberThe value of thermometer. If logarthmic, the value displayed will be the logarithm of the inputted value.

ToggleSwitch

A switch component that toggles between two values.

Examples

SAMPLE CODE
import dash_daq as daq

daq.ToggleSwitch(
  label="Default"
)

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
classNamestringClass to apply to the root component element.
colorstringColor to highlight button/indicator
dashEvents'click'
disabledbooleanIf true, switch cannot be clicked
fireEventcallbackA callback for firing events to dash.
idstringThe ID used to identify this compnent in Dash callbacks
labelstring or dict \| Array[]<String \| ShapeDescription to be displayed alongside the control. To control styling, pass a dict with label and style properties.
labelPosition'top','bottom'Where the component label is positioned.
setPropscallbackDash-assigned callback that gets fired when switch is toggled.
sizenumberThe size of the switch
styledictStyle to apply to the root component.
themedictTheme configuration to be set by a ThemeProvider
valuebooleanThe state of the switch
verticalbooleanIf true, switch will be vertical instead of horizontal

DarkThemeProvider

DarkThemeProvider is a component that is placed at the root of the component tree to make all components match the dark theme

Examples

SAMPLE CODE
import dash_daq as daq

daq.DarkThemeProvider([
  html.Link(
    href="https://codepen.io/anon/pen/BYEPbO.css",
    rel="stylesheet"
  ),
  html.Div([
    html.Div([
      html.H2('Controls'),
      dark_controls
    ], style={ 'width': '80%' })
  ],
  style={
    'width': '100%',
    'display': 'flex',
    'flexDirection': 'column',
    'alignItems': 'center',
    'justifyContent': 'center'
  })
])

Configuration

ATTRIBUTETYPEDEFAULTDESCRIPTION
themedictTheme dict to override with a custom theme
theme['dark']booleanTrue for Dark mode, false for Light
theme['detail']stringColor used for UI details, like borders
theme['primary']stringHighlight color
theme['secondary']stringSupporting color