Creating a Pie Chart in React with Chart.js | Updated 2024

82

Visualizing data effectively is crucial for any modern web application. Pie charts are particularly useful for showing proportions in a dataset at a glance. In this tutorial, we’ll explore how to create a responsive pie chart in a React application using Chart.js, a popular JavaScript library that simplifies data visualization.

Setting Up Your React Environment

First, make sure you have a React project set up. If you need to create one, you can use the following commands:

npx create-react-app react-pie-chart
cd react-pie-chart

Step by Step Guide Pie Chart in React JS

Step 1: Install Chart.js and React-Chartjs-2

To integrate Chart.js into your React project, you need to install both chart.js and react-chartjs-2, which provides React components for Chart.js:

npm install chart.js react-chartjs-2

Step 2: Create the Pie Chart Component

Once the installations are complete, you can create a new component to house your pie chart. Let’s call this component PieChartComponent.js. Here, we’ll import the necessary modules from react-chartjs-2 and define our chart data and options:

import React from 'react';
import { Pie } from 'react-chartjs-2';
import 'chart.js/auto';

const PieChartComponent = () => {
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }
    ]
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
    },
  };

  return <Pie data={data} options={options} />;
};

export default PieChartComponent;

Step 3: Incorporate the Pie Chart in Your App

Now, include the PieChartComponent in your main application file, typically App.js:

import React from 'react';
import './App.css';
import PieChartComponent from './PieChartComponent';

function App() {
  return (
    <div className="App">
      <h1>React Pie Chart Example</h1>
      <PieChartComponent />
    </div>
  );
}

export default App;

Conclusion

You have now successfully integrated a pie chart into your React application using Chart.js and react-chartjs-2. This setup allows you to dynamically update the chart data and options as needed, making it a versatile tool for data visualization in your projects.

Pie Chart in React JS – FAQs