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).
Total people 7,600 mm
Applying color
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.
Default color 1
Subdued color 10
Primary color 100
Secondary color 1,000
Danger color 10,000
Accent color 100,000
Text alignment
EuiStat also offers alignment options. By default, text will be left aligned.
Left align $ 1,000.00
Center align 99.9999
Right align 1,000.00 €
Title size
title uses the EuiTitle component and thus its sizing properites. Although all EuiTitle sizes are available, suggested sizes include `l`, `m`, and `s`. By default, the size is set to Large (`l`). The description label cannot be re-sized via component properties.
Large size 1,000,000
Medium size 1,000,000
Small size 1,000,000
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).
10,000 Description underneath
Stat loading
If you apply the isLoading prop, the title will indicate the loading status by swapping the provided title with two flashing dashes.
Statistic is loading
Show as loading
Putting it all together
Following are samples demonstrating how you might assemble and display EuiStat components.
Total widgets 8,888
Pending widgets 2,000
Success widgets 6,800
Error widgets 88
Show as loading