Create a Pie Chart using Recharts in ReactJS
Rechart JS is a library that is used for creating charts for ReactJS. This library is used for building Line charts, Bar charts, Pie charts, etc, with the help of React and D3 (Data-Driven Documents).
Pie Charts: Pie chart is more focused on comparing the proportion area between the slices to represent the information most effectively.
Prerequisites:
Approach:
To create a Pie Chart using Recharts, we create a dataset that contains actual data. Then we define the slices using a pie element with data property which will have the data of the dataset created and with data key property which is the property name with a value for the slices.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the required modules using the following command.
npm i --save recharts
Project Structure:
The updated dependencies in package.json file will look like.
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"recharts": "^2.9.3",
"web-vitals": "^2.1.4
}
Example: This example demonstrates creating a basic pie chart using the recharts library.
Javascript
import React from 'react' ; import { PieChart, Pie } from 'recharts' ; const App = () => { // Sample data const data = [ { name: 'w3wiki' , students: 400 }, { name: 'Technical scripter' , students: 700 }, { name: 'Geek-i-knack' , students: 200 }, { name: 'Geek-o-mania' , students: 1000 } ]; return ( <PieChart width={700} height={700}> <Pie data={data} dataKey= "students" outerRadius={250} fill= "green" /> </PieChart> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us