During my time at Fullstack Academy, we learned a lot of useful APIs which are integrable with the NERDS stack (Node.js, Express, React, Databases using SQL). To maintain continuity with the Fullstack spirit, I did a brief inquiry into data visualization using the Chart.js API, and in this article I will provide a walkthrough of how to implement it in a React component.

The first thing you want to do is go to the main page, then Documentation > Get Started, and then npm install chart.js — save.

It’s recommended to install Chart.js using npm or bower, however if you’re looking to manually download the files then they’re available on CDNJS, jsDelivr, and GitHub. If you’re still not sure about which version to use then I recommend just using npm.

Once you’ve installed Chart.js, you want to import it into your React component, and there are several ways to import it.

You can implement it using script tags:

Require it in regular JavaScript:

Or, import it if you’re using Webpack to build your React components like I am:

---

Most likely, you’re going to want to import them directly into your React component:

import { Line, Pie, Doughnut, Bar, Radar, Polar, Bubble, Scatter } from ‘react-chartjs-2’;

---

There are a total of eight types of graphs included in the Chart.js API.

#data-visualization #react #javascript #chart