How to Create Pie Chart in React

 Create a Custom Pie Chart with your data using Chart from https://www.chartjs.org/

Dependencies

npm i react-chartjs-2

npm i chart.js

npm install @mui/material 

Add the details for your Pie Chart which will be passed in the <PieChart> component

Label: label of your pie chart

Data: Pass the data you want to display(I created a separate file that contains array of Data in JSON format and exported it to be used in this file as InvoiceData)

export const numofInvoiceData = {

    labels: InvoiceData.map((invoice) => invoice.status),

    datasets: [

        {

            label: 'Invoice Amounts ',

            data: InvoiceData.map((invoice) => invoice.invoiceCount),

            backgroundColor: [

                'rgba(253, 172, 96)',

                'rgba(253, 96, 96)',

                'rgba(96, 253, 253)'

            ],

            borderColor: [

                'rgba(253, 172, 96)',

                'rgba(253, 96, 96)',

                'rgba(96, 253, 253)'

            ],

            borderWidth: 1,

        },

    ],

};

{.....}

<PieChart data={numofInvoiceData} />

Create a PieChart Component and add your props data in Pie component.

import React from 'react';

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

import { Pie } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

export default function PieChart({data}) {

  return <Pie data={data} />;

}

Checkout the full code implementation at 

Invoice Portal