Stat

---

EuiStat can be used to display prominent text or number values. It consists of title and 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.