---
title: "Perspective - Cylindrical Tank"
description: "A component that looks like a 3D cylindrical tank with some liquid inside."
---

# Perspective - Cylindrical Tank

> A component that looks like a 3D cylindrical tank with some liquid inside.

![](2019-02-15_16-05-17.png)

**Component Palette Icon**:  

![](2019-05-07_9-16-28.png)

## Description

A component that looks like a 3D cylindrical tank with some liquid inside. Component can be configured so that the "liquid" rises and falls as the 'value' property changes. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name               | Description    | Property Type  |
| ------------------ | ---------------- | -------------- |
| value              | Numeric value of the tank's level.      | value: numeric |
| capacity           | Total capacity of the tank. Default is 100.       | value: numeric |
| liquidColor        | Color used to render the filled part of the tank. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx)         | color          |
| tankColor          | Color of the non-filled tank section. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx)        | color          |
| liquidOpacity      | The opacity of the liquid in the tank. 0 is fully transparent, 1 is fully opaque. Default is 0.5.    | value: numeric |
| liquidWarningColor | The warning color of the liquid in the tank. See [Color Selector.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx) | color|
| tankWarningColor   | The tank warning color. See [Color Selector.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx)   | color          |
| warningThreshold   | The warning appearance will be used when value as a percentage of the capacity exceeds this value. Default is 100   | value: numeric |
| strokeWidth        | The stroke width, in pixels, for the outside of the tank. Default is 1.    | value: numeric |
| valueDisplay       | Value display configuration. Renders and styles a value overlay in the tank. Click here to see [valueDisplay](perspective-cylindrical-tank.md#valuedisplay-properties) properties.  | object         |
| style  | Sets a style for this cylindrical tank. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object  |

### valueDisplay Properties
| Name    | Description  | Property Type  |
| ------- | ------------ | -------------- |
| enabled | Whether valueDisplay is shown. Default is true.     | value: boolean |
| style   | Modify the valueDisplay style using the style properties. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| format  | Format to apply to value which is then used as the display value. Available options include: NoneIntegerPercentCurrency | value: string  |
| unit    |  Unit value to display on value overlay:**enabled**: If true, will show either a prefixed or postfixed unit. Value is boolean. **value**: Unit value to display. Value is string. **fix**: Direction in which to place the unit. Either as a prefix or a postfix. Value is string.     | object         |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Example

![](2019-08-27_9-53-08.png)

|Property|Value|
|--|--|
|props.value|	85|
|props.capacity	|100|
|props.warningThreshold|80|