Chakra-UI

I♥️Components

Stat

|

Chakra Docs

|

⦾ When building an application or a dashboard, you often need to display some statistics or key data points. That's where the Stat component from Chakra UI comes in handy. It's designed to help display these pertinent pieces of information effectively.

The Stat component is a set of components for displaying statistic content. It's a composable component that you can use to display essential metrics or statistics in a readable manner.

  • Stat: The primary component that serves as the container for a single statistic. It's responsible for arranging the sub-components and giving the overall look and feel of the statistic.
  • StatLabel: This sub-component is used to represent the description of the statistic. It's generally a small piece of text that explains what the stat is about.
  • StatNumber: This is the heart of the Stat component. It's used to display the numeric value of the statistic. It's typically the most prominent part of the Stat, as it contains the actual value that we're interested in.
  • StatHelpText: This sub-component provides additional context or information about the statistic. It can be used to display a range of dates that the statistic covers, or any other explanatory text.
  • StatArrow: This sub-component is used to indicate a trend or change in the statistic. It shows either an upward or downward arrow based on the type prop (which can be either "increase" or "decrease"). This provides a visual indication of whether the stat has increased or decreased.
  • StatGroup: This component is used when you need to display a group of statistics. It acts as a container for multiple Stat components. It ensures the stats are arranged and spaced nicely, making it ideal for displaying several related statistics together.

These components can be imported as follows:

Examples

Basic Usage

⦾ Let's say we want to display the total revenue of an online store. In this example, StatLabel represents the description of the statistic, StatNumber represents the main statistic or numeric content, and StatHelpText is a small text hint or more information about the statistic.
Total Revenue
$250,000
Jan 1 - Dec 31

Code

Adding an Indicator

⦾ The Stat component also includes an indicator option using the StatArrow sub-component to represent whether a stat has gone up or down. Here's an example of using aStatGroup to display multiple stats with increase or decrease indicators.

In this example, we used the StatGroup component to group multiple Stat components. The StatArrow component is used to show the percentage increase or decrease of the corresponding stat. The type prop can be either "increase" or "decrease", which shows an up or down arrow respectively.

New Users
2,500
increased by15.24%
Bounce Rate
50%
decreased by5.05%

Code

Did you know?

Creative Idea No. 1

Interactive Stat Component: You can make the Stat component interactive. When working with statistics, especially dynamic ones, you could provide more details about a particular stat when a user hovers over or clicks on it. In this example, when users hover over the StatLabel, they are provided with more details about the statistic.
Registered Users
2,500
Since Jan 2021

Code

Creative Idea No. 2

Stats with Real-time Data: Real-time data tracking is quite common in modern applications. A Stat component can be dynamically updated with real-time data, which can be visually appealing and informational. In this example, we're using the JSONPlaceholder API to fetch a list of users. We then set the length of the returned data array as the users count. This count is updated every second, simulating a real-time data feed. Please note that this is just a simulation. In reality, the number of users fetched from the JSONPlaceholder API won't change, but in a real application with an actual backend, the count would vary based on real-time data.
Total Users
0
Updated every second

Code

Creative Idea No. 3

Color-coded Stats: Color can play a crucial role in conveying information intuitively. You could color-code your Stat components based on their state or value. In this example, the StatNumber is colored green to indicate a high satisfaction score. You could adjust the color dynamically based on the score's value. This can provide an instant visual cue to users about the nature of the statistic.
Satisfaction Score
92%
Based on 200 reviews

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.