How to Create a Simple Pie Chart with Chart.js on React

Rainer Regan
3 min readMay 1, 2024

Hi, welcome back to my mini tutorial series. In this guide, I will tell you a simple trick to create a simple pie chart with Chart.js library on a React App.

Chart.js is an awesome Javascript library that provides tools to create awesome custom charts on your website. To follow this tutorial, please make sure that you have an active React project.

Step 1 — Installing Chart.js and react-chartjs-2

The most important thing is to install the Chart.js library on your project using NPM. BUT, to use Chart.js on React easily, we can utilize a React wrapper for Chart.js, which is react-chartjs-2.

Now, please make sure to install these two libraries.

npm install chart.js react-chartjs-2

Step 2 — Prepare the Dataset

Next, you may want to prepare the dataset that you want to show using a pie chart on your website. In this case, I will use a dummy dataset, but you can use any dataset you want, even if you want to fetch data from API or your database.

For this guide, I will simply create dummy data of my app user role.

const data = {
labels: ["Customer", "Business"],
datasets: [
{
data: [12, 29],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderWidth: 1,
},
],
};

This is the explanation:

  • Label: This is the label for each data category, in this case, I will go with business and customer user type
  • Datasets: This array will tell chart.js the data that you want to show. For this sample, I will go with an array of two data for each category, 12 Customer users, and 29 Business users.
  • Background color: This will tell chart.js the color that you want to give for each data category on the pie chart.
  • Border width: The border width for the pie-chart.

Step 3 — Using the Pie Chart Component

After preparing the data, you can now create a Pie chart using chart js but first, we need to import the components that are needed.

First, we need to import these from the chart.js and react-chartjs-2

import { Pie } from 'react-chartjs-2'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

We will use the Pie component from the react-chartjs-2 wrapper, but we need to also register ArcElement, Tooltip, and Legend from chart js first.

ChartJS.register(ArcElement, Tooltip, Legend);

After that, we can now use the Pie component

<Pie data={data} />

I have created a custom component for this chart, so my final code will look like this:

import { Pie } from 'react-chartjs-2'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

const TotalUserPieChart = () => {
const data = {
labels: ["Customer", "Business"],
datasets: [
{
data: [12, 29],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderWidth: 1,
},
],
};

return (
<Pie data={data} />
)
}

export default TotalUserPieChart

After reloading your app, the chart will look like this:

Conclusion

Congratulations on your first Pie chart using chart.js, by the end of this guide, you have successfully created a simple pie chart using Chart.js library. You can now explore more about this chart-making experience. Your next step is to try other chart types. You can explore more about other chart type on their official documentation.

Thank you, and happy coding!

--

--

Rainer Regan
Rainer Regan

Written by Rainer Regan

Hi, I'm a software engineer, I write articles to share my experiences in software engineering. Founder of Exacode Systems. https://exacode.io

No responses yet