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:

• NPM & Node JS
• React JS
• Recharts.js

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

👁 Image

Dependencies

"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.

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: