Thermometer Examples and Reference


Default Thermometer

An example of a default Thermometer without any extra properties.

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.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,

    ),
])


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


if __name__ == '__main__':
    app.run_server(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.

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

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

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

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

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:

labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'top'):
Where the component label is positioned.

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

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

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

scale (dict; optional):
Configuration for the component scale.

scale is a dict with keys:

showCurrentValue (boolean; optional):
If True, the current value of the thermometer will be displayed.

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

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