Stat

The Stat component is used to display a single statistic.

Import#

import {
  CStat,
  CStatLabel,
  CStatNumber,
  CStatHelpText,
  CStatArrow,
  CStatGroup
} from '@chakra-ui/vue'

Usage#

Collected Fees

$500.00

Feb 12 - Feb 28

Editable Example 
<c-stat>
  <c-stat-label>Collected Fees</c-stat-label>
  <c-stat-number>$500.00</c-stat-number>
  <c-stat-helper-text>Feb 12 - Feb 28</c-stat-helper-text>
</c-stat>

Stat with Indicator#

Sent

380,610

30.60%

Clicked

45

-5.20%

Editable Example 
<c-stat-group>
  <c-stat>
    <c-stat-label>Sent</c-stat-label>
    <c-stat-number>380,610</c-stat-number>
    <c-stat-helper-text>
      <c-stat-arrow type="increase" />
      30.60%
    </c-stat-helper-text>
  </c-stat>
  <c-stat>
    <c-stat-label>Clicked</c-stat-label>
    <c-stat-number>45</c-stat-number>
    <c-stat-helper-text>
      <c-stat-arrow type="decrease" />
      -5.20%
    </c-stat-helper-text>
  </c-stat>
</c-stat-group>

Props#

  • CStatLabel, CStatHelperText, CStatNumber composes CText component
  • CStatArrow composes CIcon component
  • CStat, CStatGroup composes CBox component

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!