Indicator Examples and Reference

Default Indicator

An example of a default Indicator without any extra properties.

using Dash
using DashDaq

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(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
  ),
])


callback!(app,
  Output("my-indicator", "value"),
  [Input("my-indicator-button", "n_clicks")]
) do value
  if value % 2 == 0
      value = true
  else
      value = false
  end
  return value
end
run_server(app, "0.0.0.0", debug=true)

Label

Define the label and label orientation with label and labelPosition.

using Dash
using DashDaq

app = dash()

app.layout = daq_indicator(
  label="Label",
  labelPosition="bottom",
  value=true
)  

run_server(app, "0.0.0.0", debug=true)

Boolean Indicator Off

A boolean indicator set to off value=false.

using Dash
using DashDaq

app = dash()

app.layout = daq_indicator(
  label="Off",
  value=false
)  

run_server(app, "0.0.0.0", debug=true)

Square

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

using Dash
using DashDaq

app = dash()

app.layout = daq_indicator(
  label="Square",
  width=16,
  height=16
)   

run_server(app, "0.0.0.0", debug=true)

Color

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

using Dash
using DashDaq

app = dash()

app.layout = daq_indicator(
  label="Purple",
  color="#551A8B",
  value=true
)  

run_server(app, "0.0.0.0", debug=true)

Indicator Properties

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 the indicator in Dash callbacks.

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

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

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

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

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

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

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

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

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