Statistic
Display statistic number.
When To Use
- When want to highlight some data.
- When want to display statistic data with description.
Examples
- Basic ·
basic - Unit ·
unit - Animated number ·
animated - In Card ·
card - Timer ·
timer - Custom semantic dom styling ·
style-class
API
Common props ref：Common props
Statistic
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the Statistic component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| decimalSeparator | The decimal separator | string | . | × | |
| formatter | Customize value display logic | (value) => ReactNode | - | × | |
| groupSeparator | Group separator | string | , | × | |
| loading | Loading status of Statistic | boolean | false | 4.8.0 | × |
| precision | The precision of input value | number | - | × | |
| prefix | The prefix node of value | ReactNode | - | × | |
| styles | Customize inline style for each semantic structure inside the Statistic component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| suffix | The suffix node of value | ReactNode | - | × | |
| title | Display title | ReactNode | - | × | |
| value | Display value | string | number | - | × | |
Set value section style, please use styles.content instead | CSSProperties | - | × |
Statistic.Countdown <Badge type="error">Deprecated</Badge>
<Antd component="Alert" title="When using version >= 5.25.0, Please use Statistic.Timer instead." type="warning" banner="true"></Antd>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| format | Format as dayjs | string | HH:mm:ss | |
| prefix | The prefix node of value | ReactNode | - | |
| suffix | The suffix node of value | ReactNode | - | |
| title | Display title | ReactNode | - | |
| value | Set target countdown time | number | - | |
| valueStyle | Set value section style | CSSProperties | - | |
| onFinish | Trigger when time's up | () => void | - | |
| onChange | Trigger when time's changing | (value: number) => void | - | - |
Statistic.Timer <Badge>5.25.0+</Badge>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| type | Timer direction, count down or count up | countdown | countup | - | |
| format | Format as dayjs | string | HH:mm:ss | |
| prefix | The prefix node of value | ReactNode | - | |
| suffix | The suffix node of value | ReactNode | - | |
| title | Display title | ReactNode | - | |
| value | Target time for countdown, or start time for countup (timestamp in ms) | number | - | |
| valueStyle | Set value section style | CSSProperties | - | |
| onFinish | Trigger when time's up, only called when type is countdown | () => void | - | |
| onChange | Trigger when time's changing | (value: number) => void | - |
Semantic DOM
Statistic supports root, header, title, content, value, prefix, and suffix semantic DOM nodes.
| Semantic node | Native description | Version |
|---|---|---|
root | Root element with reset styles and overall container styles for statistic component | 6.0.0 |
header | Header element with bottom padding and title area layout styles | 6.0.0 |
title | Title element with text color, font size and other title text display styles | 6.0.0 |
prefix | Prefix element with inline-block display, right margin and other prefix content layout styles | 6.0.0 |
content | Content element with layout and alignment styles for the prefix, value and suffix area | 6.0.0 |
value | Value element with text color, font size, font family and other statistic number display styles | 6.4.0 |
suffix | Suffix element with inline-block display, left margin and other suffix content layout styles | 6.0.0 |
Semantic description source: vendor/components/statistic/demo/_semantic.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
| Token | Type | Native description |
|---|---|---|
titleFontSize | number | Title font size |
contentFontSize | number | string | Content font size |
Declaration source: vendor/components/statistic/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 标题字体大小
* @descEN Title font size
*/
titleFontSize: number;
/**
* @desc 内容字体大小
* @descEN Content font size
*/
contentFontSize: number | string;
}
interface StatisticToken extends FullToken<'Statistic'> {}
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/statistic/Countdown.tsxvendor/components/statistic/Number.tsxvendor/components/statistic/Statistic.tsxvendor/components/statistic/Timer.tsxvendor/components/statistic/index.tsxvendor/components/statistic/style/index.tsvendor/components/statistic/utils.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.