How To Create Diff Scatter And Pie Charts In React Js With Google Chart
Friends, we all know very well that the charts play a significant role in displaying the information in a more organized as well as scannable way. A drawing that represents the information in the form of a diagram helps in decision-making.
So, it becomes our job to create charts on the web or mobile app as soon as we think of developing an application.
We will be using React Google Chart library to embed Diff Scatter and Diff Pie Charts. It’s worth mentioning here that a diff chart is a standard chart that is used to highlight the difference between two charts with some comparative data.
Also, we can easily find the information variations among datasets. Diff Charts can be bar charts, column charts, pie charts and also scatter charts forms.
React JS Google Diff Scatter And Pie 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
Let’s now learn in detail:
Step 1- Create React App
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 app:
npx create-react-app sky-app-Further, we need to enter inside the project:
cd sky-appStep 2- Add Bootstrap Library
Even if you are a novice, then also you can easily install the Bootstrap library in React.
It should also be remembered that this package is not compulsory. However, this package helps in cutting the time that we spend on UI creation:
npm install bootstrap
After we have added the bootstrap library, further we have to import the bootstrap CSS in App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
</div>
);
}
export default App;Step 3- 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 have to type the below-given command in order to add the React Google Charts package:
# npm
npm install react-google-charts
# yarn
yarn add react-google-chartsStep 4- Create Diff Chart Component
This is the most significant step of this tutorial. The below code would show how to create the Diff Chart component in React app.
Firstly, we will create the components/GoogleChart.js file in which we have to define the chart’s code.
Afterward, we import the Chart from the ‘react-google-charts’ package and use the Chart directive and its properties with the static data.
Now, we need to update the below 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, we can create the Diff Pie Chart in React js app using the Google Charts API. See below:
import React, { Component } from 'react'
import Chart from 'react-google-charts'
const data = {
old: [
['Major', 'Degrees'],
['Business', 256070],
['Education', 108034],
['Social Sciences & History', 127101],
['Health', 81863],
['Psychology', 74194],
],
new: [
['Major', 'Degrees'],
['Business', 358293],
['Education', 101265],
['Social Sciences & 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 GoogleChartStep 5- Update App Js
In the fifth step, we have to open the primary App.js. In this file, we will have to append the below code:
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;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 integrate diff scatter and diff pie chart in a React js app using the third party package.
Thanks