How to Create Scatter Chart in React 18 with Google Chart

Last Updated on March 4, 2024 by Digamber in React JS

In this tutorial we will show you how to build scatter chart in React Js application.

To add the scatter plot chart in React we will use the React Google chart plugin.

In general, a scatter plot chart shows values for ideally two variables for a set of data.

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

This google chart tutorial will show you how to illustrate weight and age data through plots on a scatter diagram.

Ideally, this quick guide is best for beginners. We will walk you through step by step, and show you how to build a scatter diagram component in React.

React Js Google Scatter Chart Integration Example

• Step 1: Install New React App
• Step 3: Install Google Charts Package
• Step 2: Incorporate Bootstrap Library
• Step 4: Create Scatter Chart Component
• Step 5: Update App Js
• Step 6: Start React App

Install New React App

We will start this guide by executing the npx create-react-app command; you have to append the project name of your choice.

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

npx create-react-app react-chart

Head over to application folder.

cd react-chart

Install Google Charts Package

In React, you can use Google charts to build a chart component. We will install the React Google charts plugin for making the scatter chart.

Consequently, use either of the command to install the chart library.

npm install react-google-charts --legacy-peer-deps

Incorporate Bootstrap Library

If you don’t know the nuances of CSS, then you can use the Bootstrap library in React.

The divine confluence of React and Bootstrap drastically increases the consistency in UI development.

Therefore, use the provided command to install the library.

npm install bootstrap

In the next step, you need to go to App.js file, and import the bootstrap.

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

Create Scatter Chart Component

To create the scatter chart in React, you have to first create the `components` folder also create ScatterChart.js file within the directory.

Now, you have to 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

Update App Js

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

You 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

Start React App

Let us invoke the React application by starting the React development server.

In order to do that, here is the command that we will use to run the application.

npm start

Conclusion

In this tutorial, we have learned how to build a simple scatter chart; however, the react google chart package allows you to add more features and a slight twist in the scatter chart.

You may also change shapes with animating points of scatter; also, you can add material design support.

You may check it here to know more about it.