@chakra-ui/stat

Stat

As the name implies, the Stat component is used to display some statistics.

Installation

yarn add @chakra-ui/stat

# or

npm i @chakra-ui/stat

Import components

import {
  Stat,
  StatArrow,
  StatLabel,
  StatGroup,
  StatNumber,
  StatUpArrow,
  StatHelpText,
  StatDownArrow,
} from "@chakra-ui/stat"

Usage

<Stat>
  <StatLabel>Collected Fees</StatLabel>
  <StatNumber>£0.00</StatNumber>
  <StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>


<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      23.36%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Clicked</StatLabel>
    <StatNumber>45</StatNumber>
    <StatHelpText>
      9.05%
    </StatHelpText>
  </Stat>
</StatGroup>

Stat with Indicator

<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" />
      23.36%
    </StatHelpText>
  </Stat>
</StatGroup>

Similar packages

Other packages similar to @chakra-ui/stat

react-chartjs-2

react-chartjs-2 is a popular library for integrating Chart.js with React. It provides a wide range of chart types and is highly customizable. While @chakra-ui/stat focuses on simple statistical displays, react-chartjs-2 is more suited for complex data visualizations and charts.

recharts

Recharts is a composable charting library built on React components. It offers a variety of chart types and is designed for creating complex data visualizations. Compared to @chakra-ui/stat, Recharts provides more advanced charting capabilities and is ideal for applications requiring detailed data analysis.