Open In App

Create a Pie Chart using Recharts in ReactJS

Improve
Improve
Like Article
Like
Save
Share
Report

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: 'Geeksforgeeks', 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:

Output


Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads