How to Create Google Diff Scatter and Pie Charts in React

Charts help you understand the important data; we use charts and graphs to understand the complex set of data. In this tutorial, we will help you find out how to create the diff chart component in React js application.

To draw the diff chart in React app, we will use the React Google Charts library; we will give you step-by-step instructions to embed Diff Scatter and Diff Pie charts in React application.

A diff chart is a standard chart used to highlight the differences between two charts with comparative data. You may easily find the information variations among datasets. Diff charts come in bar charts, column charts, pie charts, and scatter charts forms.

In this tutorial, we will show you how to implement Diff Scatter chart in React also show you how to create a diff pie chart in React app. Let’s get started.

React Js Google Diff Charts Example

• Step 1: Create React App
• Step 2: Add Bootstrap Library
• Step 3: Install Google Charts Package
• Step 4: Create Diff Chart Component
• Step 5: Update App Js
• Step 6: Start React Project

Create React App

This step is not mandatory if you have installed the react app in advance.

If not, go ahead and use the given command to create the new react app.

npx create-react-app sky-app-

Following command will take you inside the project.

cd sky-app

Add Bootstrap Library

We are using Bootstrap only to help create the UI; generally, we will use its grid system to align the charts in layout.

Use the command to install the Bootstrap library in react.

npm install bootstrap

Open the App.js file and import the Bootstrap CSS.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

Install Google Charts Package

To build the charts component in React, we will need to install the React Google charts library.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Diff Chart Component

Create the components/GoogleChart.js file, in this component file we will define the charts code.

To embed the diff scatter chart in React component. First, import the Chart from ‘react-google-charts’ package and use the Chart directive and its properties with the static data.

However you may inject the dynamic data using the API url, update the code in GoogleChart.js file.

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const data = {
            old: [
              ['', 'Medicine 1', 'Medicine 2'],
              [23, null, 12],
              [9, null, 39],
              [15, null, 28],
              [37, null, 30],
              [21, null, 14],
              [12, null, 18],
              [29, null, 34],
              [8, null, 12],
              [38, null, 28],
              [35, null, 12],
              [26, null, 10],
              [10, null, 29],
              [11, null, 10],
              [27, null, 38],
              [39, null, 17],
              [34, null, 20],
              [38, null, 5],
              [33, null, 27],
              [23, null, 39],
              [12, null, 10],
              [8, 15, null],
              [39, 15, null],
              [27, 31, null],
              [30, 24, null],
              [31, 39, null],
              [35, 6, null],
              [5, 5, null],
              [19, 39, null],
              [22, 8, null],
              [19, 23, null],
              [27, 20, null],
              [11, 6, null],
              [34, 33, null],
              [38, 8, null],
              [39, 29, null],
              [13, 23, null],
              [13, 36, null],
              [39, 6, null],
              [14, 37, null],
              [13, 39, null],
            ],
            new: [
              ['', 'Medicine 1', 'Medicine 2'],
              [22, null, 12],
              [7, null, 40],
              [14, null, 31],
              [37, null, 30],
              [18, null, 17],
              [9, null, 20],
              [26, null, 36],
              [5, null, 13],
              [36, null, 30],
              [35, null, 15],
              [24, null, 12],
              [7, null, 31],
              [10, null, 12],
              [24, null, 40],
              [37, null, 18],
              [32, null, 21],
              [35, null, 7],
              [31, null, 30],
              [21, null, 42],
              [12, null, 10],
              [10, 13, null],
              [40, 12, null],
              [28, 29, null],
              [32, 22, null],
              [31, 37, null],
              [38, 5, null],
              [6, 4, null],
              [21, 36, null],
              [22, 8, null],
              [21, 22, null],
              [28, 17, null],
              [12, 5, null],
              [37, 30, null],
              [41, 7, null],
              [41, 27, null],
              [15, 20, null],
              [14, 36, null],
              [42, 3, null],
              [14, 37, null],
              [15, 36, null],
            ],
          };

class GoogleChart extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="container mt-5">
        <h2>React Diff Scatter Chart Example</h2>

        <Chart
          width={'700px'}
          height={'300px'}
          chartType="ScatterChart"
          loader={<div>Loading Chart</div>}
          diffdata={data}
          options={{
            hAxis: { viewWindow: { min: 0, max: 50 } },
            vAxis: { viewWindow: { min: 0, max: 50 } },
            theme: 'maximized',
          }}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default GoogleChart

On the other hand, you can create the Diff pie chart in React js app using the google charts API. You may also visit here to create a Diff bar chart and diff column chart.

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const data = {
  old: [
    ['Major', 'Degrees'],
    ['Business', 256070],
    ['Education', 108034],
    ['Social Sciences & History', 127101],
    ['Health', 81863],
    ['Psychology', 74194],
  ],
  new: [
    ['Major', 'Degrees'],
    ['Business', 358293],
    ['Education', 101265],
    ['Social Sciences & History', 172780],
    ['Health', 129634],
    ['Psychology', 97216],
  ],
}

class GoogleChart extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="container mt-5">
        <h2>React Diff Pie Chart Example</h2>

        <Chart
          width={'700px'}
          height={'300px'}
          chartType="PieChart"
          loader={<div>Loading Chart</div>}
          diffdata={data}
          options={{
            pieSliceText: 'none',
          }}
          rootProps={{ 'data-testid': '2' }}
        />
      </div>
    )
  }
}

export default GoogleChart

Update App Js

We have successfully developed the chart component, now register it inside the main app component.

Get into the App.js and append the given code into the file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';


function App() { 
  return (
    <div className="App">
      <GoogleChart />
    </div>
  );
}

export default App;

Start React Project

In the final step, you have to run the app. You may run the react app by using the given command.

npm start

Conclusion

In this tutorial, we have learned how to integrate diff scatter and diff pie chart in React js using the third party package. Remarkably, the diff scatter chart explained the pair of experiments; the diff scatter chart showed the comparison of two medicines through the static data set.