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:
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.
Javascript
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 | w3wiki </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:
Contact Us