Pie-Chart In React-JS Using Prime React

Hello developers, in this blog we are going to learn how to add pie chart in your component using prime react

First of all, create a new app using the following command:

npx create-react-app prime-react-pie-chart

Now install these packages in your app:

npm i primereact
npm i chart.js

This pie chart comes with more functionality and customization

Write below code on your file to see output:

import React, { useState } from 'react';
import { Chart } from 'primereact/chart';

const PieChartDemo = () => {
  const [chartData] = useState({
    labels: ['A', 'B', 'C'],      //Labels is used to display label 
    datasets: [
      {
        data: [40, 50, 30],       //data is array of number which is used to display different size pie
        backgroundColor: [       // background color is used to show different background colors
          "#42A5F5", 
          "#66BB6A",
          "#FFA726"
        ],
        hoverBackgroundColor: [  //hover background color is used to show different background colors on hover
          "#64B5F6",
          "#81C784",
          "#FFB74D"
        ]
      }
    ]
  });

  return (
    <div className="card flex justify-content-center">
      <Chart type="pie" data={chartData} style={{ margin: '0 auto', width: '40%' }} />
    </div>
  )
}

export default PieChartDemo

Output :