How To Create Vertical Bar Chart Using Chart Js In React

Hello devs,

In this another react js chart tutorial, I will show you how to create a bar chart in react js. Already I made some tutorials on react chart js like pie chart line chart etc. But in this tutorial, I will create a bar chart using react chart js.

To create this react horizontal bar chart, I will use public free API and then fetch data from that API and will show you the way to create a bar chart in react js using chart js. So if you don't use react chartjs 2 bar chart example, then this example is a perfect example for you.

This react chart js 2 bar chart example tutorial will help to create a beautiful bar chart for your react application. See the below example image which we are going to make in this react bar chart tutorial.

Step 1: Download React

To create this react bar chart in react js, we need to download it first. So download it by the following command:

npx create-react-app my-app

Step 2: Install Chartjs 2

In this second step, we need to install this react-chartjs-2 along with chart.js. So run the below command to install it for creating a bar 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 bar chart using chartjs 2. To create this react bar chart example using react chartjs 2, just you need to update the App file like below.

src/App.tsx

Now create a BarChrat.tsx component like below path:

src/components/BarChart.tsx

Recommended: How to Create Multi Line Chart in React Using Chart js

Hope this react bar chart tutorial will help you.