Easiest Process to Add Chart JS graphs to a React application

This blog is all about Chart JS to be implemented in a React application. Before we start, we assume that we have a new or existing React application with us. Now open Terminal (for Ubuntu/Mac users) or Command Prompt (for Windows users) and go to the project folder.

Now we have to install the Chart Js plugin via Node Package Manager (NPM). Type

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

We have now react-chartjs-2 plugin installed in our application as well as added to package.json file. The next thing to do is we have to call the Graph modules within the component we are about to use. Suppose we have App.js within our application.

Add Vertical Bar Graph

import React from 'react';
import {Bar} from 'react-chartjs-2'; //import Bar module from react-chart-js-2

const mydata = {
  labels: ['Sunday', 'Monday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  datasets: [
    {
      label: 'Week 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]
    }
  ]
};

export default React.createClass({
  displayName: 'Bar Example',

  render() {
    return (
      <div>
        <h2>Vertical Bar Example (custom size)</h2>
        <Bar
          data={mydata}
          width={100}
          height={50}
          options={{
            maintainAspectRatio: false
          }}
        />
      </div>
    );
  }
});

Add Horizontal Bar Graph

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2'; //import Horizontal Bar module from react-chart-js-2

const mydata = { 
    ...
    ... 
};

export default React.createClass({ 
    displayName: 'Vertical Bar Example', 
    render() { 
        return ( 
            <div> 
                <h2>Horizontal Bar Example (custom size)</h2> 
                <HorizontalBar 
                   data={mydata} 
                   width={100} 
                   height={50} 
                   options={{ maintainAspectRatio: false }} 
                /> 
            </div> 
        ); 
    } 
});

Add Line Graph

import React from 'react';
import {Line} from 'react-chartjs-2'; //import Line module from react-chart-js-2

const mydata = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
        {
        label: 'My First dataset',
        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]
        }
    ]
};

export default React.createClass({
    displayName: 'Line Chart Example',

    render() {
        return (
           <div>
           <h2>Line Chart Example</h2>
           <Line data={mydata} />
           </div>
        );
    }
});

Add Pie Chart

import React from 'react';
import {Pie} from 'react-chartjs-2'; //import Pie module from react-chart-js-2

const mydata = {
    labels: [
        'Red',
        'Green',
        'Yellow'
    ],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
        ],
        hoverBackgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
       ]
   }]
};

export default React.createClass({
   displayName: 'Pie Example',

   render() {
       return (
           <div>
           <h2>Pie Example</h2>
           <Pie data={mydata} />
           </div>
       );
    }
});

These are the general Chart Js graphs which are using regularly in a web application. You can find more about the charts in the React Chart Js official site. https://github.com/jerairrest/react-chartjs-2

Preetam Mallick Subscriber

Frontend Developer , Openweb Solutions

By profession I am a Frontend Developer at Openweb Solutions.

web

http://openwebsolutions.in/

preetam@openwebsolutions.in