Pie Chart in React

This article will teach us how to create a Pie chart in the React application.

Prerequisites of React

• Familiarity with HTML and JavaScript.
• node.js installed

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Install Bootstrap

Now install Bootstrap by using the following command.

npm install bootstrap

Now, open the index.js file and add the import Bootstrap. 

import 'bootstrap/dist/css/bootstrap.min.css';

Install Recharts

Now Install Recharts by using the following command.

npm i recharts bootstrap

Now right-click on the src folder and create a new component named 'piechartdemo.js'

import React from "react";
import { PieChart, Pie } from "recharts";
function RePieChart() {
  const data01 = [
    { name: "Team A", value: 800 },
    { name: "Team B", value: 600 },
    { name: "Team C", value: 300 },
    { name: "Team D", value: 200 },
  ];
  
  return (
    <div>
      <div width="100%" height="100%">
      <div class="col-sm-12 btn btn-info"> How to Create Pie Chart in React Application</div>
        <PieChart width={600} height={400}>
          <Pie
            data={data01}
            dataKey="value"
            cx="50%"
            cy="50%"
            outerRadius={60}
            fill="#8884d8"
          />
         
        </PieChart>
      </div>
    </div>
  );
}
export default RePieChart;

Now, import the piechartdemo component in the src/App.js file.

import './App.css';
import RePieChart from './piechartdemo'
function App() {
  return (
    <div className="App">
      <RePieChart/>
    </div>
  );
}

export default App;

Now, run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating a pie chart in a React application using the Recharts library.