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
Prop | Description and type | Default value |
|---|---|---|
Prop description# | Description and type Set the description (label) text ReactNode | Default value Required |
Prop title# | Description and type The (value) text 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. 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 boolean | Default value false |
Prop reverse# | Description and type Flips the order of the description and title 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 string | Default value default |
Prop titleSize# | Description and type Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc) "xs" | "s" | "m" | "l" | "xxxs" | "xxs" | Default value l |
Prop titleElement# | Description and type HTML Element to be used for title string | Default value p |
Prop descriptionElement# | Description and type HTML Element to be used for description string | Default value p |