How to Build React 18 Pie Chart Component using Recharts

Last Updated on March 4, 2024 by Digamber in React JS

In this guide, we will explain how to create a pie chart component in React functional component using the Recharts and bootstrap modules.

A pie chart is a circular statistical graphic tool separated into slices or segments to display numerical data.

Every slice in the Pie chart denotes a proportion of the whole, with the size of the slice proportional to the value it represents.

Pie charts are typically used to exhibit how much each part donates to the entirety, making them useful for visualizing data with a small number of categories or variables.

Pie charts are often used in business, economics, and other fields where decision-making depends on data visualization.

Recharts is a charting library for React. It offers a set of comprise charting components that are facile to customize.

You can create various charts in React, such as line charts, bar charts, area charts, pie charts, and more.

React Recharts Pie Chart Example

• Step 1: Install React Framework
• Step 2: Install Recharts Module
• Step 3: Build Function Component
• Step 4: Create Pie Chart Component
• Step 5: Add Component in App js
• Step 6: Start React Server

Install React Framework

To create a React app, you have to open the command prompt. Then, run the given command to create a new React app.

npx create-react-app my-react-app

Once the installation is complete, you can now enter into your project.

cd my-react-app

Install Recharts Module

You can use the npm or yarn package managers to install a package in a React project.

Open your terminal or command prompt and head over to the root directory of your React project.

Execute the following command:

npm i recharts bootstrap --legacy-peer-deps

Build Function Component

We will create a functional component. The function component is a simple JavaScript function, also known as a stateless component.

We are using a function class to render UI elements in the browser.

You have to create components/RePieChart.js file and define the below code within the file.

import React from 'react'
import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';

function RePieChart() {
  return (
    <div>
      
    </div>
  )
}

export default RePieChart

Create Pie Chart Component

To create a pie chart in React, you have to add the given code in the components/RePieChart.js file.

import React from "react";
import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from "recharts";

function RePieChart() {
  const data01 = [
    { name: "Group A", value: 400 },
    { name: "Group B", value: 300 },
    { name: "Group C", value: 300 },
    { name: "Group D", value: 200 },
  ];
  const data02 = [
    { name: "A1", value: 100 },
    { name: "A2", value: 300 },
    { name: "B1", value: 100 },
    { name: "B2", value: 80 },
    { name: "B3", value: 40 },
    { name: "B4", value: 30 },
    { name: "B5", value: 50 },
    { name: "C1", value: 100 },
    { name: "C2", value: 200 },
    { name: "D1", value: 150 },
    { name: "D2", value: 50 },
  ];

  return (
    <div>
      <div width="100%" height="100%">
        <PieChart width={400} height={400}>
          <Pie
            data={data01}
            dataKey="value"
            cx="50%"
            cy="50%"
            outerRadius={60}
            fill="#8884d8"
          />
          <Pie
            data={data02}
            dataKey="value"
            cx="50%"
            cy="50%"
            innerRadius={70}
            outerRadius={90}
            fill="#82ca9d"
            label
          />
        </PieChart>
      </div>
    </div>
  );
}

export default RePieChart;

Add Component in App.js

In React, App.js normally refers to the primary component of a React application.

It is the application’s entry point and is accountable for rendering the other components.

Therefore, navigate to the App.js file and import the component.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import RePieChart from "./components/RePieChart";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">
        React Recharts Pie Chart Function Component Example
      </h2>
      <RePieChart />
    </div>
  );
}

export default App;

Start React Server

Start the development server by running the following command:

npm start

Test app in the browser using below URL:

http://localhost:3000

Summary

In this tutorial, we looked at how to create a pie chart in React using the Recharts library.

Recharts is built using SVG (Scalable Vector Graphics), which makes the charts responsive and scalable to different screen sizes.

Recharts components are developed keeping essential UI fundamentals in mind, such as animation, responsiveness and top-notch interactivity.