React Chakra UI Data Display Stat

React Chakra UI Data Display Stat component is particularly useful for displaying data statistics in a visually appealing and informative manner. In this article, we will learn about the implementation of the Stat component in Chakra UI.

Prerequisites:

• NPM & Node.js
• React
• React.Js Chakra UI

Approach:

We have created a Flex Box and inside that box, we have used different stat components such as Stat, StatLabel, StatNumber, StatHelpText, StatArrow and StatGroup to create a Statistics UI. Stat and StatGroup component is rendered as a <div> tag and StatGroup is used to group set of state. StatLabel, StatNumber, StatHelpText components are rendered as a Definition List of HTML and StatArrow component is used to display increasing and decreasing svg arrows. To use all these components we have to import them from "@chakra-ui/react" module.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Project Structure:

The updated dependencies in package.json file:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: The below example is demonstrating the use of Stat in Chakra UI.

import { 
        Box, Heading, ChakraProvider, 
        Stat, StatLabel, StatNumber, 
        StatHelpText, StatArrow, StatGroup 
} from '@chakra-ui/react';

function App() {
  return (
    <>
      <ChakraProvider>
        <Box textAlign="center">
          <Heading color="green">
            Chakra UI Stat | GeeksForGeeks
          </Heading>
        </Box>

        <Box 
            display='flex' 
            justifyContent='center' 
            my='15px'>
          <StatGroup 
              border='1px solid grey' 
            borderRadius='15px' px='15px'>
            <Stat>
              <StatLabel>Total Users</StatLabel>
              <StatNumber>1000</StatNumber>
            </Stat>

            <Stat>
              <StatLabel>Total Revenue</StatLabel>
              <StatNumber>$1,000,000</StatNumber>
              <StatHelpText>Based on sales data from 
                the last quarter.</StatHelpText>
            </Stat>
          </StatGroup>
        </Box>

        <Box 
            display='flex'
            justifyContent='center' 
            my='15px'>
          <StatGroup 
              border='1px solid grey' 
            borderRadius='15px' px='15px'>
            <Stat>
              <StatLabel>User Engagement</StatLabel>
              <StatNumber><StatArrow type="increase" />25%</StatNumber>
              <StatHelpText>Increase from the previous month.</StatHelpText>
            </Stat>

            <Stat>
              <StatLabel>Conversion Rate</StatLabel>
              <StatNumber><StatArrow type="decrease" />15%</StatNumber>
              <StatHelpText>Decrease from the previous quarter.</StatHelpText>
            </Stat>
          </StatGroup>
        </Box>
      </ChakraProvider>
    </>
  );
}

export default App;

To run the application use the following command:

npm run start

Output: Now go to http://localhost:3000 in your browser: