Gauge Examples and Reference


Default Gauge

An example of a default Gauge without any extra properties.

import dash
import dash_daq as daq
import dash_core_components as dcc
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.Gauge(
        id='my-gauge',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='my-gauge-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])


@app.callback(
    dash.dependencies.Output('my-gauge', 'value'),
    [dash.dependencies.Input('my-gauge-slider', 'value')]
)
def update_output(value):
    return value


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

Minimum and Maximum

Specify the minimum and maximum values of the gauge, using the min and max properties. If the scale is logarithmic the minimum and maximum will represent an exponent.

import dash_daq as daq

daq.Gauge(
    value=5,
    label='Default',
    max=20,
    min=0,
)  

Current Value and Units

Show the current value of the gauge and the units with showCurrentValue=True and units=<units>.

import dash_daq as daq

daq.Gauge(
    showCurrentValue=True,
    units="MPH",
    value=5,
    label='Default',
    max=10,
    min=0,
)  

Logarithmic Gauge

To set the scale of the gauge to logarithmic use the property logarithmic=True.

import dash_daq as daq

daq.Gauge(
    logarithmic=True,
    value=5,
    label='Default',
    max=10,
    min=0,
)  

Color

Set the color of the gauge by using the property color=<hex_color>.

import dash_daq as daq

daq.Gauge(
    color="#9B51E0",
    value=2,
    label='Default',
    max=5,
    min=0,
)  

Color Gradient

Apply a color gradient to the gauge with the property:
color={'gradient':True,'ranges':{'<color>':[<value>, <value>],'<color>':[<value>, <value>],'<color>':[<value>, <value>]}}.

import dash_daq as daq

daq.Gauge(
    color={"gradient":True,"ranges":{"green":[0,6],"yellow":[6,8],"red":[8,10]}},
    value=2,
    label='Default',
    max=10,
    min=0,
)  

Size

Adjust the size of the gauge in pixels size=200.

import dash_daq as daq

daq.Gauge(
    size=200,
    value=2,
    label='Default',

)  

Scale

Modify where the scale starts, the label interval, and actual interval with the scale property.

import dash_daq as daq

daq.Gauge(
  label='Scale',
  scale={'start': 0, 'interval': 3, 'labelInterval': 2},
  value=3,
  min=0,
  max=24,
)  

Gauge Properties

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

help(dash_daq.Gauge)
```

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 this compnent in Dash callbacks

base (number; default 10): Base to be used in logarithmic scale.

color (dict; optional): Color configuration for the gauge’s track. color has the following type: string | dict containing keys ‘default’, ‘gradient’, ‘ranges’. Those keys have the following types:

  • default (string; optional): Color used for current value text and other minor accents
  • gradient (boolean; optional): Display ranges as a gradient between given colors.
  • ranges (dict; optional): Define multiple color ranges on the gauge’s track. The key determines the color of the range and the value is the start,end of the range itself. Ranges must be contiguous along the entirety of the gauge’s range of values. ranges has the following type: dict containing keys ‘color’. Those keys have the following types: - color (list of numbers; optional)

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

logarithmic (boolean; optional): If set to true, a logarithmic scale will be used.

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’; default 'top'): Where the component label is positioned.

min (number; default 0): The minimum value of the gauge. If logarithmic, represents the minimum exponent.

max (number; default 10): The maximum value of the gauge. If logarithmic, represents the maximum exponent.

size (number; optional): The size (diameter) of the gauge in pixels

showCurrentValue (boolean; optional): If true, the current value of the gauge will be displayed

scale (dict; optional): Configuration for the component scale. scale has the following type: dict containing keys ‘start’, ‘interval’, ‘labelInterval’, ‘custom’. Those keys have the following types:

  • start (number; optional): Value to start the scale from. Defaults to min.
  • interval (number; optional): Interval by which the scale goes up. Attempts to dynamically divide min-max range by default.
  • labelInterval (number; optional): Interval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).
  • custom (dict; optional): Custom 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 an object which contains style and label properties. custom has the following type: number | dict containing keys ‘style’, ‘label’. Those keys have the following types: - style (string; optional) - label (string; optional)

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

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

units (string; optional): Label for the current value

value (number; optional): The value of gauge. If logarithmic, the displayed value will be the logarithm of the inputted value.