How To Create Pie Chart Using React Chartjs 2 In React

In this react chartjs 2 tutorial, I will show you step by step that how to create and show data in chart in react application. To show you a simple react chart demo example, I will create pie chart with labels and data using react chartjs 2. If you don't know how to create react pie chart example, then this react chartjs 2 tutorial is for you.

So from this react chartjs 2 tutorials, you will also learn how to use react chart library to create a beautiful chart like pie chart bar chart, etc by using react chartjs 2. This react chartjs 2 is the best react chart library I think which I am going to use in this tutorial.

I will simply use some dummy json array object data with labels to show you a simple pie chart example in react application using react chartjs 2 library. So let's start our tutorial from scratch. See the below image to show the output of this react chartjs 2 tutorial.

Step 1: Download React

To create a react pie chart with labels, let's first download a fresh react application by the following command:

npx create-react-app my-app

Step 2: Install Chartjs 2

In this step, we need to install this react-chartjs-2 along with chart.js. So run the below command to install it.

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

Step 3: Update App.tsx

Now we are in the final step. To create a react pie chart example using react chartjs 2, just you need to update the App file like below.

src/App.tsx

Read also: React Redux Complete Setup Example with Api Call

Hope this react chartjs 2 tutorials will help you to create a beautiful chart in your react application.