Statistic

Display statistic number.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Use Statistics when you need to highlight a certain number or group of numbers or display statistical data with descriptions.
Custom Style: This example shows the addition of prefix and suffix, and the style of displaying values can be customized.
Countdown: Countdown component. You can use now to correct the initialization time.
Animation: With Statistic, you can make some interesting effects. For example, the value slowly becomes larger, making the display of the value more visual. If you set countUp, the animation will be executed after the component is mounted. If you want to control the animation by yourself, you can also get the instance through ref and execute ins.countUp().
DateFormat: Time display. Use dayjs to format the time, format is the format of dayjs.
Loading: You can control whether to display the loading status through loading.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Statistic

Property	Description	Type	DefaultValue	Version
countUp	Whether the value becomes larger dynamically	boolean	`-`	-
groupSeparator	Whether to display thousands separator	boolean	`-`	-
loading	Is the number loading	boolean	`-`	2.20.0
countDuration	Dynamic time (ms)	number	`2000`	-
countFrom	The number that the value starts to increase dynamically	number	`0`	-
precision	The precision of the value	number	`-`	-
format	dayjs's format	string	`-`	-
renderFormat	Custom render function. `formattedValue` represents the formatted value.	(value: StatisticProps['value'], formattedValue: string) => ReactNode	`-`	2.36.0
extra	he extra content to be rendered under the value	ReactNode	`-`	-
prefix	The prefix element	string \| ReactNode	`-`	-
suffix	The suffix element	string \| ReactNode	`-`	-
title	The title	string \| ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
style	Additional style	CSSProperties	`-`	-
styleDecimal	The style of the decimal part of the value	CSSProperties	`-`	2.47.0
styleValue	The css style of statistic's value	CSSProperties	`-`	-
value	Display value	string \| number \| Dayjs	`-`	-

Statistic.Countdown

Property	Description	Type	DefaultValue	Version
start	Whether to start the countdown	boolean	`true`	-
format	dayjs's format	string	`HH:mm:ss`	-
title	The title element	string \| ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
now	The current time. Used to correct the initialization time	number \| string \| Date \| Dayjs	`-`	-
style	Additional style	CSSProperties	`-`	-
styleValue	The css style of statistic's value	CSSProperties	`-`	-
value	To set value	number \| string \| Date \| Dayjs	`-`	-
onFinish	Callback at the end of the countdown	() => void	`-`	-
renderFormat	Custom render function, the input parameter is the result formatted by `dayjs`	(valueDiff: number, formattedDiff: string) => ReactNode	`-`	2.36.0