How to Create Line Chart Using Chartjs in React

In this react graph tutorial, I will discuss with you how to use react chartjs 2 to create a beautiful graph in react application. We can create a line chart, pie chart, bar chart or many types of chart easily in react applications using react chartjs 2. So I am here to show you how to create a react line chart in react application.

Here simply I will use some dummy json data and I will map that data to create our graph data which will be displayed on the graph. So if you don't know how to create a line graph or line chart then this example is for you. In this react line chart example tutorial, I will show you step by step that how to create, use and show data on chart in react application. 

So from this tutorial, you will also learn how to use this chart library to create this type of chart easily in your react application. See the below output of this react line chart example tutorial which we are going to create:

Step 1: Download React

To create a react line 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 for creating line chart example in react js.

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

Step 3: Update App.tsx

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

src/App.tsx

Read also:How to Create Pie Chart Using React Chartjs 2 in React

Now from this react charts example, you know that how to create line chart in react application using react chartjs 2 library.