How to make Pie chart in react js

Data visualization has always been an neccesary part of frontend development . There’s always a necessary need to visualize data for our users to help them better understand what is going on in our application. Chart.js is a popular JavaScript library used for creating flexible charts on websites, and in this tutorial, I’ll show you how to use Chart.js to create pie chart in a Reactjs.

Library Needed:

1npm install chart.js
2npm install react-chartjs-2

Line chart.js file is displayed below:

1import React from "react";
2import { Line, Pie } from "react-chartjs-2";
3import Chart from "chart.js/auto";
4
5var options = {
6  legend: {
7    position: "right",
8    labels: {
9      boxWidth: 10
10    }
11  },
12  scales: {
13    xAxes: [
14      {
15        ticks: { display: false }
16      }
17    ]
18  }
19};
20const pieData = {
21	labels: [
22		'Red',
23		'Blue',
24		'Yellow'
25	],
26	datasets: [{
27		data: [300, 50, 100],
28		backgroundColor: [
29		'rgba(255,0,0, 1)',
30		'#36A2EB',
31		'#FFCE56'
32		]
33	}]
34};
35
36export default class BarChart extends React.Component {
37  render() {
38    return (
39      <> <Pie data={pieData} options={options} /> </>
40    );
41  }
42}

App.js file is displayed below

1import "./styles.css";
2import Chart from "./BarChart";
3
4export default function App() {
5  return (
6    <div className="App">
7      <>
8        <Chart />
9      </>
10    </div>
11  );
12}

Here is the link of live example which we done so far:
Click here