Data Visualization With React & Chart.js

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.

Pre-requisites

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

Setting up

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.

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

Usage

import { Doughnut } from 'react-chartjs-2';
<Doughnut data={...} />

Bar Chart

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.

Bar chart using Chart.js

Doughnut Chart

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.

Doughnut Chart using Chart.js

Line Chart

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,

Line Chart using Chart.js

Finishing Up

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 .

muhammad-usman-108/React-with-Chart.JS