Indicator Examples and Reference


Default Indicator

An example of a default Indicator without any extra properties.

import dash
import dash_daq as daq
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.Indicator(
        id='my-indicator',
        label="Default",
    ),
    html.Button(
        'On/Off',
        id='my-indicator-button',
        n_clicks=0
    ),
])


@app.callback(
    dash.dependencies.Output('my-indicator', 'value'),
    [dash.dependencies.Input('my-indicator-button', 'n_clicks')]
)
def update_output(value):
    if value % 2 == 0:
        value = True
    else:
        value = False
    return value


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

Label

Define the label and label orientation with label and labelPosition.

import dash_daq as daq

daq.Indicator(
  label="Label",
  labelPosition="bottom",
  value=True
)  

Boolean Indicator Off

A boolean indicator set to off value=False.

import dash_daq as daq

daq.Indicator(
  label="Off",
  value=False
)  

Square

Create a square boolean indicator by setting the width and height to the same value.

import dash_daq as daq

daq.Indicator(
  label="Square",
  width=16,
  height=16
)  

Color

Define the color of the boolean indicator with color='#<color>'

import dash_daq as daq

daq.Indicator(
  label="Purple",
  color="#551A8B",
  value=True
)  

Indicator Properties

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

help(dash_daq.Indicator)
```

id (string; optional): The ID used to identify the indicator in Dash callbacks

color (string; default colors.DARKER_PRIMARY): Color of the indicator

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

height (number; optional): Height of the component. Set both width and height for a rectangular indicator

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’, ‘right’, ‘left’; default 'top'): Where the indicator label is positioned

size (number; default 15): Size of the component. Either use this or width and height

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

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

value (boolean; optional): If true, indicator is illuminated

width (number; optional): Width of the component. Set both width and height for a rectangular indicator