Dash DAQ

0.6.0 · active · verified Thu Apr 16

Dash DAQ is a Plotly-maintained component library for Dash, providing a robust set of controls and indicators. It simplifies the integration of data acquisition and control interfaces into Dash applications, offering components like BooleanSwitch, ColorPicker, and Gauge. The current version is 0.6.0, released on March 11, 2025. It follows an irregular release cadence as part of the broader Dash ecosystem.

Common errors

```
ModuleNotFoundError: No module named 'dash_daq.some_component'
```
cause Attempting to import a non-existent or renamed component, or an outdated `dash_daq` installation.

fix Verify the component name against the official documentation for your installed `dash_daq` version. Ensure `dash_daq` is correctly installed and up-to-date (`pip install --upgrade dash_daq`).
```
AttributeError: module 'dash_daq' has no attribute 'BooleanSwitch' (or similar component)
```
cause The `dash_daq` package is either not installed, an old version is installed where the component didn't exist, or it's installed in a different Python environment than the one being used.

fix Run `pip show dash_daq` to confirm installation and version. If necessary, install or upgrade: `pip install --upgrade dash_daq`. Ensure your IDE/environment is using the correct Python interpreter.
```
Error: attribute x: Expected length, "NaN" (or similar SVG/rendering errors in browser console, often with daq.Gauge)
```
cause This error, particularly with `daq.Gauge`, suggests an internal bug or incorrect configuration of component properties like `min`, `max`, or `color` ranges, leading to invalid SVG attribute values.

fix Review the properties passed to the problematic DAQ component, especially numerical ranges and color dictionaries. Try simplifying the component's properties to isolate the problematic one. Check for updates to `dash_daq` as this may be a known bug.
```
Components not loading or displaying when running an app, often with console errors like 'Error loading dependencies'
```
cause Incompatible versions of `dash` and `dash-daq`, or issues with static asset serving, especially in older Dash setups or complex deployments.

fix Ensure `dash` and `dash_daq` are compatible and up-to-date (`pip install --upgrade dash dash_daq`). For older setups, try adding `app.scripts.config.serve_locally = True` after initializing your `Dash` app. Check network console for failed asset requests.

Warnings

breaking Dash DAQ v0.4.0 introduced breaking changes related to internal module naming conventions and CSS class names. Asynchronous modules were renamed from using `~` (tilde) to `-` (hyphen), which may break imports for users directly referencing these modules. Component class names were also changed to follow BEM conventions, potentially affecting applications with custom CSS.
Fix: Review and update import paths for async modules (e.g., `dash_daq.ColorPicker-async`) and adjust custom CSS rules to match the new BEM-compliant class names.
gotcha Styling conflicts can occur when using Dash DAQ components alongside other UI libraries like `dash-bootstrap-components`. For example, `daq.BooleanSwitch` has been reported to display incorrectly due to conflicting `box-sizing: border-box` CSS rules.
Fix: Implement custom CSS overrides to target and reset conflicting properties for specific Dash DAQ components, or ensure that CSS import order correctly prioritizes Dash DAQ's styles.
gotcha In older Dash DAQ versions or specific deployment environments (e.g., Flask integration), components might fail to load or render with 'Error loading dependencies' unless `app.scripts.config.serve_locally = True` is set. This indicates an issue with fetching JavaScript bundles remotely.
Fix: For older applications, add `app.scripts.config.serve_locally = True` after initializing `Dash`. For modern Dash deployments, ensure all `dash` and `dash-daq` packages are up-to-date and verify network access to component assets.

Install

pip install dash_daq Install latest version

Imports

daq
```
import dash_daq as daq
```
Commonly imported with the alias 'daq' for brevity and consistency with Dash core components.
Dash, html, Input, Output, callback
```
from dash import Dash, html, Input, Output, callback
```
These are core Dash imports required to build a functional Dash application using DAQ components.

Quickstart

This quickstart demonstrates a basic Dash application using the `daq.BooleanSwitch` component. It initializes a Dash app, defines a layout with the switch and a Div to display its state, and then sets up a callback to update the output based on the switch's 'on' property.

from dash import Dash, html, Input, Output, callback
import dash_daq as daq

app = Dash(__name__)

app.layout = html.Div([
    html.H1("Dash DAQ Boolean Switch Example"),
    daq.BooleanSwitch(
        id='my-boolean-switch',
        on=False,
        label='Toggle Switch'
    ),
    html.Div(id='boolean-switch-output', style={'marginTop': 20})
])

@callback(
    Output('boolean-switch-output', 'children'),
    Input('my-boolean-switch', 'on')
)
def update_output(on_status):
    return f'The switch is currently: {on_status}'

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

view raw JSON →