An example of a default Gauge without any extra properties.
from dash import Dash, html, dcc, Input, Output, callback
import dash_daq as daq
app = Dash()
app.layout = html.Div([
daq.Gauge(
id='my-gauge-1',
label="Default",
value=6
),
dcc.Slider(
id='my-gauge-slider-1',
min=0,
max=10,
step=1,
value=5
),
])
@callback(Output('my-gauge-1', 'value'), Input('my-gauge-slider-1', 'value'))
def update_output(value):
return value
if __name__ == '__main__':
app.run(debug=True)
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,
)
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
)
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,
)
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,
)
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,
)
Adjust the size of the gauge in pixels size=200
.
import dash_daq as daq
daq.Gauge(
size=200,
value=2,
label='Default'
)
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,
)
Access this documentation in your Python terminal with:
```pythonhelp(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.
value
(number; optional):
The value of gauge. If logarithmic, the displayed value will be the
logarithm of the inputted value.
size
(number; optional):
The size (diameter) of the gauge in pixels.
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.
base
(number; default 10
):
Base to be used in logarithmic scale.
logarithmic
(boolean; optional):
If set to True, a logarithmic scale will be used.
showCurrentValue
(boolean; optional):
If True, the current value of the gauge will be displayed.
units
(string; optional):
Label for the current value.
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’ or ‘bottom’; default 'top'
):
Where the component label is positioned.
scale
(dict; optional):
Configuration for the component scale.
scale
is a dict with keys:
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
is a number | dict with keys:
label
(string; optional)
style
(string; optional)
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).
start
(number; optional):
Value to start the scale from. Defaults to min.
color
(dict; optional):
Color configuration for the gauge’s track.
color
is a string | dict with keys:
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
is a dict with keys:
color
(list of numbers; optional)className
(string; optional):
Class to apply to the root component element.
style
(dict; optional):
Style to apply to the root component element.