Statistic

A content box to display numeric stats and trends. It supports currencies and percentages, primary and secondary values, icons and captions, and trend signs and colors.

Statistic uses negative values to display downward trend information.

Properties

Available properties for Statistic with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptionvaluenumber

The current value.

align'left' | 'center' | 'right'

The horizontal alignment of the contents.

clickableboolean

Whether the component has an enabled Click event handler.

currencystring

The three-letter ISO currency code to use if format is currency.

decimalPlacesnumber | null

The number of decimal places to display. If necessary, values round up or down automatically.

enableTrendboolean

Whether to display the primary value with a positive or negative trend color.

formattingStyle'decimal' | 'currency' | 'percent'

The formatting style to use for the primary value.

hiddenboolean

Whether the component is visible.

iconIconKey

The icon to display.

labelstring

The text to display as a label for the input field.

labelCaptionstring

The additional text to display with the label.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

padDecimalboolean

Whether to include trailing zeros to match the specified number for decimalPlaces.

positiveTrendboolean

Whether the primary value should be considered a positive trend.

prefixstring

The text to display before the primary content.

secondaryCurrencystring

The three-letter ISO currency code to use if secondaryFormattingStyle is currency.

secondaryDecimalPlacesnumber | null

The maximum number of digits after the decimal in the secondary value.

secondaryEnableTrendboolean

Whether to display the secondary value with a positive or negative trend color.

secondaryFormattingStyle'decimal' | 'currency' | 'percent'

The formatting style to use for the secondary value.

secondaryPadDecimalboolean

Whether to include trailing zeros in the secondary value to match the specified number of secondaryDecimalPlaces.

secondaryPositiveTrendboolean

Whether the secondary value should be considered a positive trend.

secondaryPrefixstring

Text to display before the secondary value.

secondaryShowSeparatorsboolean

Whether the secondary value includes a localized thousands separator.

secondarySignDisplay'auto' | 'exceptZero' | 'trendArrows'

Whether to display only the negative sign (auto), positive and negative (exceptZero), or arrows (trendArrows) with the secondary value.

secondarySuffixstring

The text to display after the secondary value.

secondaryValuenumber | null

The secondary value.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

showSeparatorsboolean

Whether the formatted value includes a localized thousands separator.

signDisplay'auto' | 'exceptZero' | 'trendArrows'

Whether to display only the negative sign (auto), positive and negative (exceptZero), or arrows (trendArrows).

suffixstring

The text to display after the primary value.

tooltipTextstring

The text to display in a tooltip on hover or focus.

Events

Events are triggered by user interactions with Statistic. Use event handling to trigger queries or other actions in response to events.

NameDescriptionClick

A user clicks the component.

Methods

Methods for interacting with Statistic. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionsetValue(value: string | number)

Set the current value.

clearValue()

Clear the current value.

scrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

resetValue()

Reset value to the default value.

Related components