How to Create A Pie or Doughnut Chart in React using ChartJS
Jasser Mark Arioste
Creating a Pie or Doughnut Chart in React using Chart.js 3 involves a few steps. Here's a step-by-step guide to help you get started.
Step 1: Set Up a React App #
If you don't already have a React app, you can create one using create-next-app. Open your terminal and run the following command:
npx create-next-app@latest --ts react-chartjs-demo
cd react-chartjs-demo
yarn devStep 2: Install Chart.js 3 #
The next step is to Install Chart.js 3 and its React wrapper (react-chartjs-2) using npm:
#npm
npm install chart.js@3 react-chartjs-2
#yarn
yarn add chart.js@3 react-chartjs-2Step 3: Create a Chart Component #
Create a new component for your chart. For example, you can create a file named /app/components/PieChart.tsx in the src folder.
"use client"; // src/PieChart.tsx import React from 'react'; import { Doughnut } from 'react-chartjs-2'; //register the elements for the Doughnut Chart. More info here: https://www.chartjs.org/docs/latest/getting-started/integration.html import { Chart as ChartJS, ArcElement, Tooltip } from "chart.js"; ChartJS.register(ArcElement, Tooltip); const PieChart = () => { const data = { labels: ['Label 1', 'Label 2', 'Label 3'], datasets: [ { data: [30, 50, 20], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], }, ], }; const options = { // You can customize chart options here }; return <Doughnut data={data} options={options} />; }; export default PieChart;123456789101112131415161718192021222324252627282930
Step 4: Use the Chart Component in /app/page.tsx
#
Replace the content of /app/page.tsx with the following code:
import React from 'react'; import PieChart from './components/PieChart'; function Page() { return ( <div className="app"> <h1>React Chart.js 3 Example</h1> <PieChart /> </div> ); } export default Page;1234567891011121314
Visit http://localhost:3000 in your browser, and you should see your React app with the Pie Chart.
Step 6: Customize the Chart #
You can customize the chart by modifying the data and options objects in the PieChart.tsx file. Refer to the Chart.js documentation for more customization options.
That's it! You've successfully created a React app with a Pie or Doughnut Chart using Chart.js 3. Feel free to experiment with different configurations and styles to meet your specific needs.
Conclusion #
In this tutorial, we walked through the process of creating a Pie or Doughnut Chart in a React application using Chart.js 3. By following the steps outlined above, you've set up a basic React app, installed the necessary dependencies, and created a custom Pie Chart component.
Remember that Chart.js provides extensive customization options, allowing you to tailor the appearance and behavior of your charts to suit your specific requirements. The data and options objects in the chart component can be adjusted to change labels, colors, tooltips, and more.
This integration of React with Chart.js provides a powerful and flexible way to visualize data within your web applications. As you continue working with React and Chart.js, consider exploring other chart types and additional customization options available in the Chart.js documentation.
Now that you have a functional Pie or Doughnut Chart in your React app, feel free to expand and integrate it into larger projects or combine it with other React components to create comprehensive data visualization solutions. Happy coding!
Credits: Image by Erik Karits from Pixabay
