Tank Examples and Reference


Default Tank

An example of a default tank 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.Tank(
        id='my-tank',
        value=5,
        min=0,
        max=10,
        style={'margin-left': '50px'}
    ),
    dcc.Slider(
        id='tank-slider',
        value=5,
        min=0,
        max=10,
    ),
])


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

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

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

height (number; default 192): The height of the tank 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 tank. If logarithmic, represents minimum exponent.

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

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

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