React js Google Area And Full Stacked Area Charts Tutorial
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, data visualization becomes quite easy with Google charts on the web or mobile app. It offers a profound and smooth way to visualize data at the web apps.
If you are a novice and haven’t used a chart in your applications earlier, then, in this tutorial, we will learn how to create a Simple Area Chart and Full Stacked Area Chart in React Js application by using the react-google-charts plugin.
The react-google-charts plugin offers innumerable options along with amazing features. So, in this tutorial, we will learn to build the area chart in the React app. We can also create other charts like column charts, pie charts, calendar, diff charts, etc.
How To Integrate Google Area Charts In React js Application
See the following steps in order to implement the above-mentioned:
Step 1: Install React App
Step 2: Install Bootstrap Package
Step 3: Install react-google-charts plugin
Step 4: Add Google Area Charts
Step 5: Update App js File
Step 6: Start React App
Step 1- Install React App
In this very step, we simply need to install a new React App. We will do it by simply typing the command and hitting enter:
npx create-react-app react-blogNow, after we have downloaded the new react app, we will move inside the app directory:
cd react-blog
Step 2- Add Bootstrap Package
Further, we may use Bootstrap CSS to style the layout. for which we will have to execute the following command:
This step is completely optional. We will take the help of Bootstrap Library to create the containers or small UI for charts and graphs integration.
npm install bootstrap
Since Bootstrap Package is already installed. Now, we will register the package’s 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 react-google-charts Plugin
Here, in this step, we have to foster the charts in React which is quite easy with the google charts package. We will be installing this eloquent package through the given command:
# npm
npm install react-google-charts
# yarn
yarn add react-google-charts
Step 4- Add Google Area Charts
Without installing the React Google charts package, we will not be able to build the charts. Below given is the command that we will invoke to add the package into the React app.
Thus, here, we need to create components/ folder. After that, we will create GoogleChart.js file and add the given code to create the simple are chart.
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>Simple React Js Area Chart Example</h2>
<Chart
width={'700px'}
height={'320px'}
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={data}
options={{
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
// For the legend to fit, we make the chart area smaller
chartArea: { width: '50%', height: '70%' },
// lineWidth: 25
}}
// For tests
rootProps={{ 'data-testid': '1' }}
/>
</div>
)
}
}
export default GoogleChart;We can also easily create and embed the 100 Percent Stacked Areas Chart in React, use the options object and its properties to fill the area stack.
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Js Full Stacked Area Chart Example</h2>
<Chart
width={'700px'}
height={'320px'}
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={data}
options={{
isStacked: 'relative',
height: 300,
legend: { position: 'top', maxLines: 3 },
vAxis: {
minValue: 0,
ticks: [0, 0.3, 0.6, 0.9, 1],
},
}}
rootProps={{ 'data-testid': '3' }}
/>
</div>
)
}
}
export default GoogleChart;Step 5- Update App Js File
Here, we will add the GoogleChart component in the App.js 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;Step 6- Start React App
In this step, we are done with the stacked chart component building process. Now that, we have to see how does the chart looks on the browser.
For that, we need to evoke the development server starting command:
npm start
Summary
Various types of charts and graphs help us to deal with simple as well as complex information. Some commonly known graphs and charts are line graphs, column charts, pie charts, bar charts.
We hope that you find this tutorial quite easy for integrating the Google Area Charts In React js application.
Thanks