---
title: "Perspective - Vessel"
description: "An animated component that looks like a tank or vessel. Options include displaying fill level, the stand, and the agitator.  "
---

# Perspective - Vessel

> An animated component that looks like a tank or vessel. Options include displaying fill level, the stand, and the agitator.  

![](0Xi8vlr1X3.gif)

**Component Palette Icon:**

![](2020-09-01_17-33-08.png)

An animated component that looks like a tank or vessel. Options include displaying fill level, the stand, and the agitator. 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  |
| ------------------ | --------------- | -------------- |
| appearance         | Options for the appearance of the component. Options are auto, p&id, mimic, and simple. If set to auto, the value is taken from the Perspective [Session Property](ignition-modules/perspective/perspective-sessions/session-properties.md) symbols.autoAppearance.  ![](2020-09-02_14-20-21.png)                                                                                                       | value: string  |
| animationSpeed     | The speed of the animation as a percent. Set to "0" to turn off animation. If set to auto, the setting is taken from the Perspective [Session Property](ignition-modules/perspective/perspective-sessions/session-properties.md) symbols.autoAnimationSpeed.   | value: numeric |
| state | State of the animation. Built-in options are default, running, stopped, or faulted. Default is default. Built-in states and new states can be configured and applied on the [Project Properties > Symbols](ignition-modules/perspective/perspective-project-properties.md#perspective-symbols-properties) page. | value: string  |
| orientation        | Orientation of the vessel. Options are horizontal or vertical. Default is vertical.  | value: string  |
| displayStand       | Whether or not to display the stand for the vessel. Default is true.   | value: boolean |
| displayAgitator    | Whether or not to display the agitator in the vessel. Default is true.   | value: boolean |
| displayFillLevel   | Whether or not to display the fill level of liquid in the vessel. Default is true.    | value: boolean |
| liquidColor        | Color used to render the filled part of the vessel. 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.7.     | 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          |
| label              | Label settings for the component. **text**: Text for the label. Value is string.**location**: Label position relative to the vessel: top, bottom, left, right, or hidden. Default is bottom. Value is string.**justify**: Label text justification: left, center, right, or auto. Default is center. Value is string.**style**: Modify label text 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         |
| value| Value settings for the component. **displayValueAsPercent** Whether or not to display the value as a percentage. Value is boolean.**value** Text to display as value. Value is string. **capacity** Total capacity of the vessel. Default is 100. Value is numeric. **location** Value location relative to the vessel: top, bottom, right, or left. Default is bottom. Value is string. **justify** Value text justification: center, left, or right. Default is center. Value is string. **style**: Sets a style for the value. 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         |
| 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         |

## 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 

![](2020-09-02_9-48-05.png)

|Property|Value|
|--|--|
|props.orientation	|horizontal|
|props.displayStand	|true|
|props.liquidColor	|#00ACAC|
|props.label.text	|Lower Tank 23|
|props.label.location	|bottom|
|props.label.style.fontWeight	|bold|
|props.label.style.color	|#804600|
|props.value.value	|35|
|props.value.capacity	|100|
|props.value.location|	top|
|props.value.style.color|	#00ACAC|
|props.value.style.fontFamily	|Roboto|
|props.value.style.fontSize|	18|
|props.value.style.fontWeight|	bold|