Tank Examples and Reference


Default Tank

An example of a default tank without any extra properties.

using Dash
using DashDaq

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(external_stylesheets=external_stylesheets)

app.layout =  html_div([
  daq_tank(
      id="my-tank",
      value=5,
      min=0,
      max=10,
      style=Dict("margin-left" => "50px")
  ),
  dcc_slider(
      id="tank-slider",
      value=5,
      min=0,
      max=10,
  ),
])


callback!(app,
  Output("my-tank", "value"),
  [Input("tank-slider", "value")]) do value
  return value
end

run_server(app, "0.0.0.0", debug=true)
0
2
4
6
8
10
0246810

Current value with units

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

using Dash
using DashDaq

app = dash()

app.layout = daq_tank(
  value=6,
  showCurrentValue=true,
  units="gallons",
  style=Dict("margin-left" => "50px")
)   

run_server(app, "0.0.0.0", debug=true)
0
2
4
6
8
10
6

Height and width

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

using Dash
using DashDaq

app = dash()

app.layout = daq_tank(
  height=75,
  width=200,
  value=6,
  style=Dict("margin-left" => "50px")
)  

run_server(app, "0.0.0.0", debug=true)
0
2
4
6
8
10

Label

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

using Dash
using DashDaq

app = dash()

app.layout = daq_tank(
  value=3,
  label="Tank label",
  labelPosition="bottom"
)  

run_server(app, "0.0.0.0", debug=true)
0
2
4
6
8
10

Custom scales

Control the intervals at which labels are displayed, as well as the labels themselves with the scale property.

using Dash
using DashDaq

app = dash()

app.layout = daq_tank(
  value=3,
  scale=Dict("interval" => 2, "labelInterval" => 2,
          "custom" => Dict("5" => "Set point")),
  style=Dict("margin-left" => "50px")
)  

run_server(app, "0.0.0.0", debug=true)
0
4
Set point
8
10

Logarithmic

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

using Dash
using DashDaq

app = dash()

app.layout = daq_tank(
  min=0,
  max=10,
  value=300,
  logarithmic=true,
  base=3,
  style=Dict("margin-left" => "50px")
)  

run_server(app, "0.0.0.0", debug=true)
30
32
34
36
38
310

Tank Properties

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 (Real; optional): The value of tank. If logarithmic, the displayed value will be the logarithm of the inputted value.

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

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

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

theme (Dict; default light): Theme configuration to be set by a ThemeProvider.

currentValueStyle (Dict; optional): text style of current value.

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

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

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

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

showCurrentValue (Bool; 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 Real | Dict with keys:

    • label (String; optional)

    • style (String; optional)

  • interval (Real; optional): Interval by which the scale goes up. Attempts to dynamically divide min-max range by default.

  • labelInterval (Real; optional): Interval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).

  • start (Real; 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.

exceedMessage (String; optional): Warning message when value exceed max.

lagingMessage (String; optional): Warning message when value is laging from min.

textColor (String; optional): text color.