CODEX

Data Visualization with React JS and Chart JS

Hello, today I will talk about how to use great Chart Js charts with React Js, or even how to dynamically make data visualizable using API.

I want to tell you a little bit about Chart Js. Chart.js is a free open source JavaScript library that supports different types of charts for data visualization.

So what are the types of charts that this supports?

📌 Line

📌 Bar

📌 Radar

📌 Doughnut and Pie

📌 Polar area

📌 Bubble

📌 Scatter

If you’re ready, let’s start!

To get started, you need to install the React application first. You can browse for it: https://reactjs.org/docs/create-a-new-react-app.html

If you have installed the React application, now it is necessary to setup Chart Js for React. One line is enough for this.

Installation via NPM

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

Installation via YARN

yarn add react-chartjs-2 chart.js

After it is loaded, you need to create a Js file and import the chart type you want to use with the react-chartjs-2 library.

import { Bar } from 'react-chartjs-2'

Then we create a function called DynamicChart, create a function called Chart and start doing the operations. First, const variables are created to hold the data.

Next, we create a structure like in Chart Js’ documentation and try our own data statically.

(https://www.chartjs.org/docs/latest/getting-started/usage.html)

Here you can set horizontal data with labels and vertical data with data. You can also color it with the background and border.
Chart () function was called with the UseEffect React method. After return (), it is specified in <Bar /> that it receives its data from the defined chartData, and then additions can be made to the option for the appearance of the chart.

The static chart will look like this:

Okay, if you have learned how to make a bar chart statically, I will now explain how to make a dynamic bar chart by pulling data from the API with small changes.

For this, first you need to install Axios.

So what is Axios?
Axios is a javascript library that allows easy HTTP calls in client-side applications. Available as npm or bower package or via CDN.

To include Axios in the project, it is enough to write the following line

npm install axios --save 

Then, by typing axios.get (‘API URL) into the Chart () function, you can check whether you get the errors and data with the .then and .catch methods after specifying which URL to extract the data from.

Now it is necessary to pull this data. You need to define two strings that work with let and get salary and age. In .then, values can be obtained by parsing the salary and age variables with the for loop. And setChartData must also be enclosed in .then for the values to appear.

Finally, in order to be dynamic, it is necessary to specify the empAge and empSal arrays to the label and data places we provide statically. In this way, as the API changes, the data will also change.

The bar chart view drawn from the API will look like this.

Yes! With this method, you can visualize colorful and useful data from each other. If you want to try on different chart types, you just need to write the name in the import section and write your values ​​in the imported type in return.

📌 Line Chart

import { Line } from 'react-chartjs-2'
...
...
return(
<Line
.
.
. />)

📌 Radar Chart

import { Radar } from 'react-chartjs-2'
...
...
return(
<Radar
.
.
. />)

📌 Doughnut and Pie Chart

import { Doughnut } from 'react-chartjs-2'
...
...
return(
<Doughnut
.
.
. />)

import { Pie } from 'react-chartjs-2'
...
...
return(
<Pie
.
.
. />)

📌 Polar area Chart

import { Polar} from 'react-chartjs-2'
...
...
return(
<Polar
.
.
. />)

Yes, that’s it! I hope this article will be useful for you in React Js for data visualization.

If you want to review, you can take a look at my github project:

Senakbulut/BarChart

See you in my next article.