Statistic

Display statistic number.

Importimport{ Statistic }from"antd";

Sourcecomponents/statistic

Docs

Edit this page Changelog

When To Use

When want to highlight some data.
When want to display statistic data with description.

Examples

Active Users

112,893

Account Balance (CNY)

112,893.00

Active Users

Basic

Simplest Usage.

Active Users

Account Balance (CNY)

Animated number

Animated number with react-countup.

Countdown

48:00:29

Million Seconds

48:00:29:992

Day Level

2 天 0 时 0 分 29 秒

Countdown

00:00:09

Countdown

Countdown component.

Feedback

1,128

Unmerged

93/ 100

Unit

Add unit through prefix and suffix.

Active

11.28%

Idle

9.30%

In Card

Display statistic data in Card.

API

Common props ref：Common props

Statistic

Property	Description	Type	Default	Version
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	-
suffix	The suffix node of value	ReactNode	-
title	Display title	ReactNode	-
value	Display value	string \| number	-
valueStyle	Set value section style	CSSProperties	-

Statistic.Countdown

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	-	4.16.0

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
contentFontSize	Content font size	number	24
titleFontSize	Title font size	number	14

Global TokenHow to use?