Create a Pie Chart Using Recharts in ReactJS

Last Updated : 31 Jul, 2024

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

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.

JavaScript

//App.js

import React, { useState } from 'react';
import { PieChart, Pie, Tooltip, Cell } from 'recharts';

const App = () => {
    const [activeIndex, setActiveIndex] = useState(-1);

    const data = [
        { name: 'Geeksforgeeks', students: 400 },
        { name: 'Technical scripter', students: 700 },
        { name: 'Geek-i-knack', students: 200 },
        { name: 'Geek-o-mania', students: 1000 }
    ];

    const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

    const onPieEnter = (_, index) => {
        setActiveIndex(index);
    };

    return (
        <PieChart width={700} height={700}>
            <Pie
                activeIndex={activeIndex}
                data={data}
                dataKey="students"
                outerRadius={250}
                fill="green"
                onMouseEnter={onPieEnter}
                style={{ cursor: 'pointer', outline: 'none' }} // Ensure no outline on focus
            >
                {data.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
            </Pie>
            <Tooltip />
        </PieChart>
    );
}

export default App;