Charts help you understand the important data; we use charts and graphs to understand the complex set of data.
In this tutorial, we will help you find out how to create the diff chart component in React js application.
To draw the diff chart in React app, we will use the React Google Charts library.
We will give you step-by-step instructions to embed Diff Scatter and Diff Pie charts in React application.
A diff chart is a standard chart used to highlight the differences between two charts with comparative data.
You may easily find the information variations among datasets. Diff charts come in bar charts, column charts, pie charts, and scatter charts forms.
In this tutorial, we will show you how to implement Diff Scatter chart in React also show you how to create a diff pie chart in React app.
Let’s get started.
React Js Google Diff 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
Create React App
This step is not mandatory if you have installed the react app in advance.
If not, go ahead and use the given command to create the new react app.
npx create-react-app sky-app-Following command will take you inside the project.
cd sky-appAdd Bootstrap Library
We are using Bootstrap only to help create the UI; generally, we will use its grid system to align the charts in layout.
Use the command to install the Bootstrap library in react.
npm install bootstrap --legacy-peer-depsOpen the App.js file and import the Bootstrap CSS.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
</div>
);
}
export default App;Install Google Charts Package
To build the charts component in React, we will need to install the React Google charts library.
# npm
npm install react-google-charts
# yarn
yarn add react-google-chartsCreate Diff Chart Component
Create the components/GoogleChart.js file, in this component file we will define the charts code.
To embed the diff scatter chart in React component. First, import the Chart from ‘react-google-charts’ package and use the Chart directive and its properties with the static data.
However you may inject the dynamic data using the API url, update the code 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 GoogleChartOn the other hand, you can create the Diff pie chart in React js app using the google charts API.
You may also visit here to create a Diff bar chart and diff column chart.
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 GoogleChartUpdate App Js
We have successfully developed the chart component, now register it inside the main app component.
Get into the App.js and append the given code into the file.
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;Start React Project
In the final step, you have to run the app. You may run the react app by using the given command.
npm start
Conclusion
In this tutorial, we have learned how to integrate diff scatter and diff pie chart in React js using the third party package.
Remarkably, the diff scatter chart explained the pair of experiments; the diff scatter chart showed the comparison of two medicines through the static data set.