Building Doughnut Charts with React Chart.js 2: Quick Guid

Explore the essentials of building Doughnut Charts with React Chart.js 2 in this quick guide. Learn to create dynamic visualizations effortlessly, enhancing your data presentation with React simplicity.

Step 1: Install React Chart.js 2 Library

Navigate to your project directory in the terminal or command prompt and install React Chart.js 2 along with its dependency, Chart.js:

npm install --save chart.js react-chartjs-2
//or
yarn add chart.js react-chartjs-2

This command installs React Chart.js 2 and the required Chart.js library in your project.

Step 2: Create and Import the Component

Create a new component in your Nextjs application and import React Chart.js 2:

// src/components/MyDoughnutChart.js
"use client";
import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

function YourChartComponent() {

let data= [
  {
    label: "Label 1",
    value: 55,
    color: "rgba(0, 43, 73, 1)",
    cutout: "50%",
  },
  {
    label: "Label 2",
    value:15,
    color: "rgba(0, 103, 160, 1)",
    cutout: "50%",
  },
  {
    label: "Label 3",
    value: 80,
    color: "rgba(83, 217, 217, 1)",
    cutout: "50%",
  },
]

  const options: any = {
    plugins: {
      responsive: true,
    },
    cutout: data.map((item) => item.cutout),
  };

  const finalData = {
    labels: data.map((item) => item.label),
    datasets: [
      {
        data: data.map((item) => Math.round(item.value)),
        backgroundColor: data.map((item) => item.color),
        borderColor: data.map((item) => item.color),
        borderWidth: 1,
        dataVisibility: new Array(data.length).fill(true),
      },
    ],
  };

  return <Doughnut data={finalData} options={options} />;
}

Basic Doughnut chart result:

Now, we will enhance the basic Doughnut chart we’ve created.

//npm i chartjs-plugin-datalabels
...
import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(ArcElement, Tooltip, Legend,ChartDataLabels);

function YourChartComponent() {

let data= [
  {
    label: "Label 1",
    value: 55,
    color: "rgba(0, 43, 73, 1)",
    cutout: "50%",
  },
  {
    label: "Label 2",
    value:15,
    color: "rgba(0, 103, 160, 1)",
    cutout: "50%",
  },
  {
    label: "Label 3",
    value: 80,
    color: "rgba(83, 217, 217, 1)",
    cutout: "50%",
  },
]

  const options: any = {
    plugins: {
   datalabels: {
        formatter: function (value) {
          let val = Math.round(value);
          return new Intl.NumberFormat("tr-TR").format(val); //for number format
        },
        color: "white",
        
        font: {
          weight: 'bold',
          size:14,
          family: 'poppins',
        },
      },
      responsive: true,
    },
    cutout: data.map((item) => item.cutout),
  };

  const finalData = {
    labels: data.map((item) => item.label),
    datasets: [
      {
        data: data.map((item) => Math.round(item.value)),
        backgroundColor: data.map((item) => item.color),
        borderColor: data.map((item) => item.color),
        borderWidth: 1,
        dataVisibility: new Array(data.length).fill(true),
      },
    ],
  };

  return <Doughnut data={finalData} options={options} />;
}

By refining our initial Doughnut chart, we’ve taken a step towards creating more impactful visualizations. Explore further customization and features to elevate your data representation.More details you can find from here.