Stat

EuiStat can be used to display prominent text or number values. It consists of titleand description elements with several visual styling properties (examples below).

Color variants

title can be altered using the color property. By default, it will appear in full color. For proper color contrast, only a limited set of EUI colors are offered. See the Props tab above for a list of available colors.

Text alignment

EuiStat also offers alignment options. By default, text will be left aligned.

Title size

title uses the EuiTitle component and thus uses the same sizing property values (applied via the titleSize property). Although all EuiTitle sizes are available, suggested sizes include 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'. By default, the size is set to large 'l'. The description label cannot be re-sized via component properties.

Reverse the order

You can reverse the order of the description and title text by setting the reverse property to true. By default, the description (label) is displayed above the title (value).

Stat loading

If you apply the isLoading prop, the title will indicate the loading status by swapping the provided title with two flashing dashes.

Component variants

In the following example, you can see variants of how the EuiStat component can be assembled. This component is very helpful for constructing single-value visualizations and summaries for different dashboards and page layouts and for communicating trends over time.

Props

EuiStat

Extends HTMLAttributes


Prop	Description and type	Default value
Prop description#	Description and type Set the description (label) text Type: `ReactNode`	Default value Required
Prop title#	Description and type The (value) text Type: `ReactNode`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type Will hide the title with an animation until false Type: `boolean`	Default value `false`
Prop reverse#	Description and type Flips the order of the description and title Type: `boolean`	Default value `false`
Prop textAlign#	Description and type Type: `"center" \| "left" \| "right"`	Default value `left`
Prop titleColor#	Description and type The color of the title text Type: `string`	Default value `default`
Prop titleSize#	Description and type Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc) Type: `"xs" \| "s" \| "m" \| "l" \| "xxxs" \| "xxs"`	Default value `l`
Prop titleElement#	Description and type HTML Element to be used for title Type: `string`	Default value `p`
Prop descriptionElement#	Description and type HTML Element to be used for description Type: `string`	Default value `p`