Doughnut Chart In React-JS Using Primereact

Hello Developers, in this blog we will learn how we can use and implement doughnut chart in our project

Chart makes data more readable and understandable for normal user

First make a new app using this following command

npx create-react-app

Then install following packages:

npm i chart.js primereact primeflex primeicons

Then add this code in your component

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

const DoughnutChartDemo = () => {
  const [chartData] = useState({
    labels: ['A', 'B', 'C'],
    datasets: [
      {
        data: [30, 50, 100],           // data is array of numbers which is used to display chart
        backgroundColor: [             // backgroundcolor is array of string (colors) which is used for background
          "#FF6384",                    //color of each doughnut
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [       //hoverbackgroundcolor is aarray of string(colors)which is used to
          "#FF6384",                 // change backgroundcolor of dooughnut on hover
          "#36A2EB",
          "#FFCE56"
        ]
      }
    ]
  });

  const [lightOptions] = useState({
    plugins: {
      legend: {
        labels: {
          color: '#495057'            //lightoptions is basically an object which contains options for your doughtnut chart
        }
      }
    }
  });

  return (
    <div className="card flex justify-content-center">
      <Chart type="doughnut" data={chartData} options={lightOptions} style={{ position: 'relative', width: '40%' }} />
    </div>
  )
}
export default DoughnutChartDemo

Demo: