React

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 &amp; History', 127101],
    ['Health', 81863],
    ['Psychology', 74194],
  ],
  new: [
    ['Major', 'Degrees'],
    ['Business', 358293],
    ['Education', 101265],
    ['Social Sciences &amp; 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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

2 days ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

5 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

2 weeks ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago