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(★)	dynamic(any)		The label to be displayed. This can be formatted if it is a numerical value.
value	dynamic(int,float)	min	The location of the label on the [min, max] range.
min	int|float	0	The minimum value of the range.
max	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, in CSS units, of the indicator (used when orientation is horizontal).
height	str	None	The height, in CSS units, of the indicator (used when orientation is vartical).
id	str		The identifier that will be assigned to the rendered HTML component.
properties	dict[str, any]		Bound to a dictionary that contains additional properties for this element.
class_name	dynamic(str)		The list of CSS class names that will be associated with the generated HTML Element. These class names will be added to the default taipy-<element_type>.
hover_text	dynamic(str)		The information that is displayed when the user hovers over this element.

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

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.

Usage

Minimal usage

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

Page content

MarkdownHTML

<|message|indicator|value={val}|min=0|max=100|>

<taipy:indicator value="{val}" min="0" max ="100">message</taipy:indicator>

Formatting the message

A format can be applied to the message.

Page content

MarkdownHTML

<|{50}|indicator|format=%.2f|value=10|>

<taipy:indicator format="%.2f" value="10">{50}</taipy:indicator>

Vertical indicators

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

Page content

MarkdownHTML

<|message|indicator|orientation=v|value=10|>

<taipy:indicator orientation="vertical" value="10">message</taipy:indicator>

Dimensions

Properties width and height can be specified depending of the orientation.

Page content

MarkdownHTML

<|message|indicator|value={val}|width=50vw|>

<|message|indicator|value={val}|orientation=vertical|height=50vh|>

<taipy:indicator value="{val}" width="50vw">message</taipy:indicator>

<taipy:indicator value="{val}" orientation="vertical" height="50vh">message</taipy:indicator>