logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.20.6
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Statistic

Display statistic number.
Importimport{ Statistic }from"antd";
Sourcecomponents/statistic
DocsEdit this page

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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

Examples

API

Common props ref:Common props

Statistic

PropertyDescriptionTypeDefaultVersion
decimalSeparatorThe decimal separatorstring.
formatterCustomize value display logic(value) => ReactNode-
groupSeparatorGroup separatorstring,
loadingLoading status of Statisticbooleanfalse4.8.0
precisionThe precision of input valuenumber-
prefixThe prefix node of valueReactNode-
suffixThe suffix node of valueReactNode-
titleDisplay titleReactNode-
valueDisplay valuestring | number-
valueStyleSet value section styleCSSProperties-

Statistic.Countdown

PropertyDescriptionTypeDefaultVersion
formatFormat as dayjsstringHH:mm:ss
prefixThe prefix node of valueReactNode-
suffixThe suffix node of valueReactNode-
titleDisplay titleReactNode-
valueSet target countdown timenumber-
valueStyleSet value section styleCSSProperties-
onFinishTrigger when time's up() => void-
onChangeTrigger when time's changing(value: number) => void-4.16.0

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
contentFontSizeContent font sizenumber24
titleFontSizeTitle font sizenumber14

Global TokenHow to use?

Basic

Simplest Usage.

codepen icon
External Link Icon
expand codeexpand code
Animated number

Animated number with react-countup.

codepen icon
External Link Icon
expand codeexpand code
Countdown

Countdown component.

codepen icon
External Link Icon
expand codeexpand code
Unit

Add unit through prefix and suffix.

codepen icon
External Link Icon
expand codeexpand code
In Card

Display statistic data in Card.

codepen icon
External Link Icon
expand codeexpand code
Active Users
112,893
Account Balance (CNY)
112,893.00
Active Users

Active Users
Account Balance (CNY)
Countdown
48:00:29
Million Seconds
48:00:29:986
Day Level
2 天 0 时 0 分 29 秒
Countdown
00:00:09
Feedback
1,128
Unmerged
93/ 100
Active
11.28%
Idle
9.30%