logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Unit
Animated number
In Card
Countdown
API
Design Token

Statistic

  • SegmentedTable

    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
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Display statistic number.

    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 | dayjs-
    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.

    expand codeexpand code
    Animated number

    Animated number with react-countup.

    expand codeexpand code
    Countdown

    Countdown component.

    expand codeexpand code
    Unit

    Add unit through prefix and suffix.

    expand codeexpand code
    In Card

    Display statistic data in Card.

    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:988
    Day Level
    2 天 0 时 0 分 29 秒
    Countdown
    00:00:09
    Feedback
    1,128
    Unmerged
    93/ 100
    Active
    11.28%
    Idle
    9.30%