Getting started with React and Chart.js (bar chart)

Introduction

This article will cover the basics around getting started with Chart.js.

I discovered this library while trying to find some data visualization tools for a project I’m building. Needless to say, I’m extremely impressed with the simplicity and results.

In the future, I hope to write more about my adventures with this library in the hopes that it helps someone looking for answers.

I will link all of my resources at the end of this article, so make sure to check them out for more information.

Setup and installation

1. If you haven’t yet already, create a React project and remove all the boilerplate code. You should just be left with App.js and Index.js

npx create-react-app chartjsexample

2. Install Chart.js in your project

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

Creating a Bar Chart component

1. Next, create a new file in your src directory called Barchart.js

For a cleaner setup, you may want to organize your chart related javascript files in a subdirectory (e.g. src/charts/Barchart.js)

2. We’ll start with a simple bar chart, so add the following code to the Barchart.js file

3. All that’s left to do is to import the component into your App.js file and you should see a bar chart

4. Start your React application and the bar chart should be visible

npm start

Here’s our result

chart.js

Vertical Bar Chart | react-chartjs-2