Data Visualization With React & Chart.js

Muhammad Usman
Oct 23 · 5 min read
Image for post
Image for post
Image Created by Own: Icons taken from Google

Thanks to Analytics Vidhya that published my previous article “Data Visualization with React & ECharts” in which I have covered the importance of data visualization and how we visualize the data in React.js using ECharts. Now this time we do the same data visualization plots but with other JavaScript library that is Chart.js. This article helps you to plot & understand some basic visualization of the dummy data with React and Chart.js.

React is an open-source JavaScript library, maintained by Facebook for building user interfaces or UI components.

Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter.

Before starting, make sure you have installed the node.js, otherwise you can installed from official site of Node.js

Lets create the React project by using the npm package. Open the command prompt/terminal and run the following command:

npx create-react-app visualization

Once your command executed successfully then test if the web server is running fine :

  • for this first, change directory to project folder
cd visualization
  • and run
npm start

The following page will be shown on the browser, which means you web development server working fine.

Image for post
Image for post

Now next we need to install and add Chart.js in the project by execute the following commands:

npm install --save react-chartjs-2 chart.js
import { Doughnut } from 'react-chartjs-2';<Doughnut data={...} />

Add a new file in src folder named ‘Bar.js’ and insert the below code:

import React from 'react';
import {Bar} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
function App() {
return (
<div>
<h2>Bar Example (custom size)</h2>
<Bar
data={data}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
</div>
);
}
export default App;

Open the App.js file in src folder and replace the default code with the below code:

import React from 'react';
import './App.css';
import Bar from './Bar';
function App() {
return (
<div className="App">
<Bar />
</div>
);
}
export default App;

Note: By default react application is run by index.js file which import the App.js file. So the above code snap actually create the separate JavaScript code for Bar.js and then we import this in App.js.

Again run the `npm start` command then it will show the below line graph on browser.

Image for post
Image for post
Bar chart using Chart.js

For doughnut chart, you can again add a new file in src folder named ‘Doughnut.js’ and insert the below code:

import React from 'react';
import {Doughnut} from 'react-chartjs-2';
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
};
function App() {
return (
<div>
<h2>Doughnut Example</h2>
<Doughnut data={data} />
</div>
);
}
export default App;

Open the App.js file in src folder and replace the default code with the below code:

import React from 'react';
import './App.css';
import Doughnut from './Doughnut';
function App() {
return (
<div className="App">
<Doughnut />
</div>
);
}
export default App;

Reload the browser and you will get the pie chart on browser.

Image for post
Image for post
Doughnut Chart using Chart.js

Similar to bar and pie chart plotting, you can create the line chart as well. For line chart, you can again add a new file in src folder named ‘Line.js’ and insert the below code:

import React from 'react';
import {Line} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Dataset of Months',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
function App() {
return (
<div>
<h2>Line Chart</h2>
<Line data={data} />
</div>
);
}
export default App;

Open the App.js file in src folder and replace the default code with the below code:

import React from 'react';
import './App.css';
import Line from './Line';
function App() {
return (
<div className="App">
<Line />
</div>
);
}
export default App;

Output of line chart in the browser should be look like,

Image for post
Image for post
Line Chart using Chart.js

Similar to Line, Doughnut and Line chart, Chart.js also provide different type of visualization. You may find different type of plots in Github of react-chartjs-2 library and check the examples. You just need to follow the same steps as above , copy the JSON of visualization, create new file and finally import it in App.js file.

You can find the above project in GitHub repository .

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

Muhammad Usman

Written by

M.Sc. Student in RWTH Aachen University, Germany | Software Engineer at IconPro GmbH | https://stackoverflow.com/users/9180179/usman

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

Muhammad Usman

Written by

M.Sc. Student in RWTH Aachen University, Germany | Software Engineer at IconPro GmbH | https://stackoverflow.com/users/9180179/usman

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store