React Tutorials

How to Create Scatter Chart in React Js with Google Chart

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
npm install react-google-charts

# yarn
yarn add react-google-charts

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.

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

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago