Thermometer Examples and Reference


Default Thermometer

An example of a default Thermometer 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.Thermometer(
        id='my-thermometer',
        value=5,
        min=0,
        max=10,
        style={
            'margin-bottom': '5%'
        }
    ),
    dcc.Slider(
        id='thermometer-slider',
        value=5,
        min=0,
        max=10,

    ),
])


@app.callback(
    dash.dependencies.Output('my-thermometer', 'value'),
    [dash.dependencies.Input('thermometer-slider', '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 positon 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)
```

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 (string; optional): The color of the thermometer fill/current value text

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

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

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 thermometer. If logarithmic, represents the minimum exponent.

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

showCurrentValue (boolean; optional): If true, the current value of the thermometer 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 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