Stat
Used to display statistical data with a title and its corresponding value, emphasizing the current value of a particular attribute.
Import
import { Stat, StatGroup } from 'rsuite';Examples
Basic
Display a simple statistic with a label and value.
Format Options
Customize the value display using formatOptions for locale-aware number formatting.
Trend
Show a trend indicator (up/down) alongside the value to reflect changes.
Border
Add a border around the statistic for emphasis.
Stat with Progress
Combine the statistic with a progress bar to visualize progress.
Stat with Ring Progress
Display progress as a ring around the statistic value.
Icon
Add an icon to the statistic for visual context.
Info Tip
Show additional information with an info tip on the label.
Value Unit
Display a unit next to the value for clarity (e.g., %, $).
Stat Group
Group multiple statistics together in a grid layout.
Responsive Stat Group
Make the stat group responsive to different screen sizes.
Props
<Stat>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('div') |
HTML tag of the component |
| bordered | boolean | Whether to display a border |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat') |
The prefix of the component CSS class |
| icon | ReactNode | The icon of the component |
<Stat.Label>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('dt') |
HTML tag of the component |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat-label') |
The prefix of the component CSS class |
| info | string | The info tip of the label |
| uppercase | boolean | Whether to display the label in uppercase |
<Stat.Value>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('dd') |
HTML tag of the component |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat-value') |
The prefix of the component CSS class |
| formatOptions | Intl.NumberFormatOptions | The format options of the value |
| value | number | The value of the component |
<Stat.Trend>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('span') |
HTML tag of the component |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat-trend') |
The prefix of the component CSS class |
| indicator | 'up' | 'down' | 'equal' | The trend indicator of the component |
<Stat.HelpText>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('span') |
HTML tag of the component |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat-help-text') |
The prefix of the component CSS class |
<StatGroup>
| Property | Type (Default) |
Description |
|---|---|---|
| as | elementType ('div') |
HTML tag of the component |
| children | ReactNode | The children of the component |
| classPrefix | string ('stat-group') |
The prefix of the component CSS class |
| columns | number (4) |
The number of columns of the group |
| spacing | number (6) |
The spacing between the stats |