# Statistic

- Page: https://jiguang132.com/resources/arco-design/docs/statistic
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Display statistic number.

## Install

```bash
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](https://github.com/iamkun/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](https://github.com/iamkun/dayjs)'s format|string |`-`|-|
|renderFormat|Custom render function. `formattedValue` represents the formatted value.|(value: [StatisticProps](statistic#statistic)['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](https://github.com/iamkun/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|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt