Statistic
Display numerical statistics and metrics with clear formatting and visual hierarchy.
Basic usage
Display a number with formatting. Turn off showTrend for plain values; leave it on for changes.
Types
number abbreviates values of 1,000 or more with k, M or b. percentage multiplies the value by 100, so pass a fraction.
Trends
With showTrend on (the default), the sign of value sets the trend. Positive values are green with a plus sign, negative values are red with a minus sign, and values that round to zero show a dash.
Rank changes
Set changeMode to rank to show an up or down arrow instead of a sign.
Prefix and suffix
Add prefixes and suffixes to provide context for your statistics. With showTrend on, the plus or minus sign replaces the prefix, so turn it off for values like currency. Without a trend the value renders as an absolute number, so pass the sign in prefix when it matters, for example prefix="-$".
Decimal places
decimals sets the maximum number of decimal places. Add fixedDecimals to always show that many.
Empty value
A null or undefined value shows emptyText instead.
Properties
The numerical value to display. null or undefined shows emptyText.
number abbreviates large values with k, M or b. percentage multiplies the value by 100 and adds %.
Default: number
Colors the value by its sign and adds a plus or minus sign, or an arrow in rank mode. Values that round to zero show a dash. When off, the value renders as an absolute number.
Default: true
value shows a plus or minus sign. rank shows an up or down arrow and keeps the prefix.
Default: value
Maximum number of decimal places to display
Default: 1
Always shows exactly decimals fraction digits, keeping trailing zeros
Default: false
Shows the full number without k, M or b abbreviation
Default: false
Text to display when value is null or undefined
Default: n/a
Text to prepend before the value. Replaced by the plus or minus sign when showTrend is on and changeMode is value.
Text to append after the value
Whether to animate value changes
Default: true
Duration of the digit animation in milliseconds
Default: 250
Additional CSS classes for the wrapper and the value. Replaces the default font-medium tabular-nums value styling.