Thermometer Examples and Reference

Default Thermometer

An example of a default Thermometer without any extra properties.

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

app = Dash(__name__)

app.layout = html.Div([
    daq.Thermometer(
        id='my-thermometer-1',
        value=5,
        min=0,
        max=10,
        style={
            'margin-bottom': '5%'
        }
    ),
    dcc.Slider(
        id='thermometer-slider-1',
        value=5,
        min=0,
        max=10,

    ),
])


@callback(
    Output('my-thermometer-1', 'value'),
    Input('thermometer-slider-1', 'value')
)
def update_thermometer(value):
    return value


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

Current value with units

Display the value of the thermometer along with
optional units with showCurrentValue and units.

import dash_daq as daq
daq.Thermometer(
    min=95,
    max=105,
    value=100,
    showCurrentValue=True,
    units="C"
)

Height and width

Control the size of the thermometer by setting height and width.

import dash_daq as daq
daq.Thermometer(
    value=5,
    height=150,
    width=5
)

Label

Display a label alongside the thermometer in
the specified position by setting label and labelPosition.

import dash_daq as daq
daq.Thermometer(
    value=5,
    label='Current temperature',
    labelPosition='top'
)

Custom scales

Control the intervals at which labels are displayed,
as well as the labels themselves with the scale property.

import dash_daq as daq
daq.Thermometer(
    value=5,
    scale={'start': 2, 'interval': 3,
    'labelInterval': 2, 'custom': {
        '2': 'ideal temperature',
        '5': 'projected temperature'
    }}
)

Thermometer Properties

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

help(dash_daq.Thermometer)
```

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 thermometer. If logarthmic, the value displayed will be
the logarithm of the inputted value.

height (number; default 192):
The height of the thermometer in pixels.

width (number; default 20):
The width of the thermometer in pixels.

color (string; optional):
The color of the thermometer fill/current value text.

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

max (number; default 10):
The maximum value of the thermometer. 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 thermometer 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.

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

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