Dash DAQ

Detailed API documentation for all Dash DAQ components, including available properties and usage instructions, is available at the official Dash documentation site.

https://dash.plotly.com/dash-daq

To use Dash DAQ components in your Dash applications, install the package via pip.

pip install dash_daq

To ensure that a user's selected value is not lost when the page is refreshed, use the persistence properties. The Knob component supports storing the value in different browser storage mechanisms.

• persistence: (boolean | string | number) Enables persistence.
• persistence_type: Defines where the value is stored:
  • 'memory': Kept in memory; reset on page refresh.
  • 'local': Uses window.localStorage; persists even after the browser is closed.
  • 'session': Uses window.sessionStorage; cleared when the browser session ends.
• persisted_props: An array specifying which props to persist. For the Knob, this is typically ['value'].

To ensure a user's input is not lost when the page is refreshed, use the persistence and persistence_type props.

• persistence: Set to True (or a truthy value) to enable persistence.
• persistence_type:
  • 'local': Uses window.localStorage; data persists even after the browser is closed.
  • 'session': Uses window.sessionStorage; data is cleared when the browser is closed.
  • 'memory': Data is kept in memory and reset on page refresh.

# Example: Persisting the value in localStorage
daq_input = dash_daq.NumericInput(
    id='persistent-input',
    value=5,
    persistence=True,
    persistence_type='local'
)

To ensure a user's selected color is preserved after a page refresh, use the persistence and persistence_type properties.

Available persistence_type options:

• local: Uses window.localStorage; data persists even after the browser is closed.
• session: Uses window.sessionStorage; data is cleared when the browser is closed.
• memory: Data is kept only in memory and is reset on page refresh.

dash_daq.ColorPicker(
    id='persistent-picker',
    persistence=True,
    persistence_type='local'
)

Dash DAQ components use a themed styling system. Components are rendered with specific CSS classes following a naming convention: daq-{component_name}--{theme_mode}, where {theme_mode} is either --light or --dark.

Theme colors are managed via a theme object. The default theme includes:

• primary: #ABE2FB
• secondary: #E6E6E6
• detail: #D3D3D3
• dark: false (default)

Users can provide a custom theme object to override these values. If dark: true is set in the theme, components will use the --dark CSS variant.

// Conceptual representation of the naming convention
// <div class="daq-component-name--light"></div>
// <div class="daq-component-name--dark"></div>

To display different labels for the 'on' and 'off' states, pass an array to the label property.

• If vertical is False: The first element is the left label, and the second is the right label.
• If vertical is True: The first element is the bottom label, and the second is the top label.

Labels can be simple strings or objects containing a label string and a style object.

# Example of dual labels with custom styling
dash_daq.ToggleSwitch(
    id='dual-label-switch',
    label=[
        {'label': 'OFF', 'style': {'color': 'red'}},
        {'label': 'ON', 'style': {'color': 'green'}}
    ]
)

You can ensure that a user's toggle state is remembered even after a page refresh by using the persistence and persistence_type properties.

• persistence: Set to True to enable persistence.
• persistence_type:
  • 'local': Uses window.localStorage (persists after browser close).
  • 'session': Uses window.sessionStorage (cleared when browser is closed).
  • 'memory': Kept only in memory (reset on page refresh).

The Gauge component allows fine-grained control over how the scale (ticks and numbers) is rendered via the scale prop.

scale Prop Options:

• start: (number) The starting value of the scale.
• interval: (number) The step size between labels.
• labelInterval: (number) How many intervals to skip before rendering a label.
• custom: (object) An object containing custom labels and styles for specific values.

Label Positioning:

• labelPosition: Can be set to 'top' or 'bottom' to determine where the main label is placed relative to the gauge.

<Gauge
  min={0}
  max={100}
  scale={{
    start: 0,
    interval: 10,
    labelInterval: 2,
    custom: {
      50: { label: 'Midpoint', style: { fontWeight: 'bold' } }
    }
  }}
  labelPosition="top"
/>