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