React JS Tutorial- Google Stacked Bar Chart Example

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-app
Now, 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

Leave a Reply

Your email address will not be published. Required fields are marked *