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.
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-app
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
Open 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;
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-charts
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 GoogleChart
On 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 GoogleChart
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;
In the final step, you have to run the app. You may run the react app by using the given command.
npm start
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.
In this quick tutorial, we will show you how to quite easily add the active…
In this tutorial, we will learn how to create a Redux Store in React application.…
This detailed guide will cover how to create the Load More button and display data…
In this tutorial, we will step by step learn how to configure redux persist in…
In this comprehensive tutorial, we will learn how to persist redux store's states in React…
In this guide, we are going to learn how to add dark mode and light…