React Tutorials

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 enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago