React Tutorial- How To Create Scatter Chart In React Js With Google Chart

How To Create Scatter Chart In React Js With Google Chart

Friends, in this tutorial, we will learn how to build a Scatter Chart in React Js app. To add the scatter plot chart in React, we have to use the React Google Chart plugin.

Some of us already know that a scatter plot chart shows values for two variables for a set of data.

However, if the points are coded, then one additional available can be displayed.

This guide will show how to illustrate weight and age data through plots on a scatter diagram.

 

React JS Google Scatter Chart Integration Example

 

Step 1- Download A New React Project

Step 2- Install Google Charts Package

Step 3- Add Bootstrap Library

Step 4- Create Scatter Chart Component

Step 5- Update App Js

Step 6- Start React App

Let’s now learn in detail:

Step 1- Download New React Project

The first step will be started by installing a new React project by executing the npx create-react app.

It will generate a new React project with which we will create a chart component:

npx create-react-app react-chart

Now, we head over to the application folder:

cd react-chart

 

Step 2- Install Google Charts Package

Now, the next step is to install the React Google Charts plugin which would help in building a chart component.

We can use either of the below-given commands to install the chart library:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 3- Incorporate Bootstrap Library

Even if you are a novice, then also you can easily install the Bootstrap library in React.

The confluence of React and Bootstrap drastically increases the consistency in Ui development. So, we will execute the following command to install the library:

npm install bootstrap

Further, we need to go to App.js file, and import the bootstrap:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 

Step 4- Create Scatter Chart Component

Firstly, we have to create the ‘components’ folder for creating the scatter chart in React. Also, we have to create the ScatterChart.js file within the file:

Afterward, we will add the code in the components/ScatterChart.js:

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

const scatterData = [
  ['Age', 'Weight'],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7],
]

const scatterOptions = {
  title: 'Age vs. Weight comparison',
  hAxis: { title: 'Age', minValue: 0, maxValue: 15 },
  vAxis: { title: 'Weight', minValue: 0, maxValue: 15 },
  legend: 'none',
}

class ScatterChart extends Component {
  render() {
    return (
      <div>
        <h2>React Scatter Chart Example</h2>
        <Chart
          width={'700px'}
          height={'420px'}
          chartType="ScatterChart"
          loader={<div>Loading Chart</div>}
          data={scatterData}
          options={scatterOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default ScatterChart

 

Step 5- Update App Js

In the fifth step, we have to open the primary App.js. In this file, we will have to define or import the ScatterChart component.

We have to ensure that the ScatterChart tag is called inside the App() function:

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

function App() {
  return (
    <div className="container mt-5">
      <ScatterChart />
    </div>
  )
}

export default App

 

Step 6- Start React App

Since we have reached the end of this guide, we have to invoke this React app by using the following command for running the application:

npm start

 

Conclusion

Friends, hope that you have found this tutorial quite easy and simple to execute in which we have learned step by step how to build a simple scatter chart. However, it is possible to add some more features to the scatter chart by using React Google Chart package.

 

Thanks