React js Google Stacked Chart Example 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.
In this tutorial, we will learn how to create a Bar Chart in React Js application by using the react-google-charts library.
In this guide, we will learn to create simple bar charts with multiple series in React, also a stacked bar chart with multiple series in a React app. We will also get to know how to customize bar chart colors to change their look and feel.
How To Add Google Multiple Series Bar 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: Add Google Charts Package
Step 4: Implement Google Bar Charts
Step 5: Update App js Component
Step 6: Start React App
Step 1- Install React App
In the very step, we will install a new React App for which we take the help of create-react-app:
npx create-react-app tiny-appNow, after we have downloaded the new react app, we will jump inside the app directory:
cd tiny-app
Step 2- Set Up Bootstrap Library
Further, we install the Bootstrap package for creating the UI components. By using it, we can get typography, forms, buttons, navigation and other user interface components quite easily.
Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.
npm install bootstrap
In order to take the utter benefit of Bootstrap, components require the library to be imported into the App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
</div>
);
}
export default App;
Note that we can skip this step completely if we don't want to use this package.
Step 3- Install Google Charts Package
Without installing the React Google charts package, we will not be able to build the charts. Below given is the command that needs to be invoked to add the package into the React app.
# npm
npm install react-google-charts
# yarn
yarn add react-google-charts
Step 4- Add Google Bar Charts
Here, in this step, we have to create components/ folder. After that, we will create GoogleChart.js file. Into this file. Then, add all the given code:
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Basic Bar Chart with Multiple Series</h2>
<Chart
width={'700px'}
height={'320px'}
chartType="BarChart"
loader={<div>Loading Chart</div>}
data={data}
options={{
title: 'Population of Largest U.S. Cities',
chartArea: { width: '50%' },
hAxis: {
title: 'Total Population',
minValue: 0,
},
vAxis: {
title: 'City',
},
}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
)
}
}
export default GoogleChart;Theoretically, on the other hand, we can create a stacked bar chart with multiple series.
So, we are using the test data to display the data in a bar chart.
We may also use the real API to fill the chart with the data.
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Basic Bar Chart with Multiple Series</h2>
<Chart
width={'700px'}
height={'300px'}
chartType="BarChart"
loader={<div>Loading Chart</div>}
data={data}
options={{
title: 'Population of Largest U.S. Cities',
chartArea: { width: '50%' },
isStacked: true,
hAxis: {
title: 'Total Population',
minValue: 0,
},
vAxis: {
title: 'City',
},
}}
rootProps={{ 'data-testid': '3' }}
/>
</div>
)
}
}
export default GoogleChart;Step 5- Update App Js Component
Here, we will register the GoogleChart components globally into the main 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, the stacked bar chart component building process has been completed. 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
Friends, in this, React js Stacked Bar Chart tutorial, we have learned how to install and configure react google charts in react app. Moreover, seen how to create React Bar Chart Component with multiple series data. And that brings us to the end of this tutorial eventually.
Thanks