Tank Examples and Reference


Default Tank

An example of a default tank 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.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,
    ),
])

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

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

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 tank fill.

height (number; default 192):
The height of the tank 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:

  • label (string; optional)

  • style (dict; optional)

labelPosition (a value equal to: ‘top’, ‘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 tank. If logarithmic, represents the
maximum exponent.

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

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

    Or 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.

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

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

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

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

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