Tank Examples and Reference

Default Tank

An example of a default tank without any extra properties.

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

app = Dash(__name__)

app.layout = html.Div([
    daq.Tank(
        id='my-tank-1',
        value=5,
        min=0,
        max=10,
        style={'margin-left': '50px'}
    ),
    dcc.Slider(
        id='tank-slider-1',
        value=5,
        min=0,
        max=10,
    ),
])

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

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

Current value with units

Display the current value, along with optional units with the units
and showCurrentValue properties.

import dash_daq as daq
daq.Tank(
    value=6,
    showCurrentValue=True,
    units='gallons',
    style={'margin-left': '50px'}
)

Height and width

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

import dash_daq as daq
daq.Tank(
    height=75,
    width=200,
    value=6,
    style={'margin-left': '50px'}
)

Label

Display a label alongside your tank in the specified position
with label and labelPosition.

import dash_daq as daq
daq.Tank(
    value=3,
    label='Tank label',
    labelPosition='bottom'
)

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.Tank(
    value=3,
    scale={'interval': 2, 'labelInterval': 2,
           'custom': {'5': 'Set point'}},
    style={'margin-left': '50px'}
)

Logarithmic

Use a logarithmic scale for the tank with the specified
base by setting logarithmic=True.

import dash_daq as daq
daq.Tank(
    min=0,
    max=10,
    value=300,
    logarithmic=True,
    base=3,
    style={'margin-left': '50px'}
)

Tank Properties

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

help(dash_daq.Tank)
```

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 component in Dash callbacks.

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

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

width (number; default 112):
The width of the tank in pixels.

color (string; optional):
The color of tank fill.

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

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

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

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.