Skip to content

indicator

Displays a label on a red-to-green scale at a specific position.

The min value can be greater than the max value.
The value will be maintained between min and max.

Properties

Name Type Default Description
display(★) Any
dynamic

The label to be displayed.
This can be formatted if it is a numerical value.

value Union[int, float]
dynamic
min

The location of the label on the [min, max] range.
The default value is the min value.

min Union[int, float] 0

The minimum value of the range.

max Union[int,float] 100

The maximum value of the range.

format str

The format to use when displaying the value.
This uses the printf syntax.

orientation str "horizontal"

The orientation of this slider.

width str None

The width of the indicator, in CSS units (used when orientation is horizontal).

height str None

The height of the indicator, in CSS units (used when orientation is vertical).

id str

The identifier that is assigned to the rendered HTML component.

properties dict[str, Any]

Bound to a dictionary that contains additional properties for this element.

class_name str
dynamic

The list of CSS class names that are associated with the generated HTML Element.
These class names are added to the default taipy-indicator class name.

(★)display is the default property for this visual element.

Usage

Minimal usage

Shows a message at a specified position between min and max.

Definition

<|Value|indicator|value={val}|min=0|max=100|>
<taipy:indicator value="{val}" min="0" max="100">Value</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("Value", value="{val}", min="0", max="100")

Formatting the message

The format property can be set to the format of the value to be displayed.

A format can be applied to the message.

Definition

<|50|indicator|format=%.2f|value=10|>
<taipy:indicator format="%.2f" value="10">50</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("50", format="%.2f", value="10")

Vertical indicators

The orientation property can be specified to "vertical" (or "v") to create a vertical indicator.

Definition

<|Value|indicator|orientation=v|value=10|>
<taipy:indicator orientation="v" value="10">Value</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("Value", orientation="v", value="10")

Dimensions

The properties width and height can be specified, depending on the value of orientation.

Definition

<|Value 1|indicator|value={val1}|width=50vw|>

<|Value 2|indicator|value={val2}|orientation=vertical|height=50vh|>
<taipy:indicator value="{val1}" width="50vw">Value 1</taipy:indicator>

<taipy:indicator value="{val2}" orientation="vertical" height="50vh">Value 2</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("{Value 1}", value="{val1}", width="50vw")
tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw")

Styling

All the indicator controls are generated with the "taipy-indicator" CSS class. You can use this class name to select the indicator controls on your page and apply style.