How to draw a pie chart using react bootstrap ?

A Pie Chart, a circular statistical plot, visually represents a single series of data where each slice’s area corresponds to the percentage it represents in the overall data, providing an intuitive visualization of proportional relationships.

Prerequisites:

• NodeJS or NPM
• React JS
• Bootstrap

Approach to create Pie Chart:

This React component uses the “react-chartjs-2” library to render a Pie chart displaying hours studied on different weekdays. The sample data includes labels for weekdays, corresponding study hours, and background colors for each segment, providing a simple visualization within an MDBContainer component from “mdbreact.”

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 install --save mdbreact react-chartjs-2

Step 4: Add Bootstrap CSS and fontawesome CSS to index.js.

import '@fortawesome/fontawesome-free/css/all.min.css';  
import 'bootstrap-css-only/css/bootstrap.min.css';  
import 'mdbreact/dist/css/mdb.css';

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "mdbreact": "^5.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "recharts": "^2.10.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

Javascript

import React from "react";
import { MDBContainer } from "mdbreact";
import { Pie } from "react-chartjs-2";

const App = () => {

    // Sample data
    const data = {
        labels: ["Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday"],
        datasets: [
            {
                label: "Hours Studied in Geeksforgeeks",
                data: [2, 5, 6, 7, 3],
                backgroundColor: ["blue", "green",
                    "yellow", "pink", "orange"],
            }
        ]
    }

    return (
        <MDBContainer>
            <Pie data={data} />
        </MDBContainer>
    );
}

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

Output