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
        hoverBackgroundColor: [       //hoverbackgroundcolor is aarray of string(colors)which is used to
          "#FF6384",                 // change backgroundcolor of dooughnut on hover

  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%' }} />
export default DoughnutChartDemo


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories