React Js Google Stacked Bar Chart Example Tutorial

Last updated on: by Editorial Team

In this eloquent guide, we will step by step teach you how to create a bar chart in React js application using the react Google charts library.

Data visualization is easy with Google Charts; It offers a robust and profound way to visualize data on web applications. Be it simple charts or more complex charts, fret not, Google charts don’t lack anywhere.

In this guide, you will learn to create simple bar charts with multiple series in react, a stacked bar chart with multiple series in react app moreover, we will share how to customize bar chart colors to change the look and feel of the bar charts.

How to Add Google Multiple Series Bar Charts in React Js App

  • 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

Install React App

The create-react-app tag preceded with npx and followed by the project name allows you to install the new react app.

Instantly, append the given command on the console and hit enter to start the process.

npx create-react-app tiny-app

Jump on to the project folder, to begin the development process.

cd tiny-app

Install Bootstrap Package

You may use the Bootstrap framework to design the UI rapidly. If you use it, you can get typography, forms, buttons, navigation, and other user interface components pretty easily.

npm install bootstrap

Head over to App.js file, import the package path to make it available throughout the app.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

However, if you don’t want to use this package you may completely skip this step

Install Google Charts Package

In this step, you will use the suggested command to install the Google charts package in react app.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Add Google Bar Charts

Now that, create components/ folder, after that create GoogleChart.js file. Then, you have to add the following code into the file.

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.

We are using the test data to display the data into the bar chart; however, you may 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;

Update App Js Component

We have reached to last step eventually, you have to register the Google charts component into 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;

Start React App

Till now, everything has been placed to build the stacked bar chart component.

Go ahead, and run the react development server using the provided command.

npm start

React Js Google Stacked Bar Chart Example Tutorial

Conclusion

Throughout this tutorial, we have learned how to build a basic react app from scratch. Also, looked at how to create react bar chart component with multiple series data. The react bar chart tutorial is completed.

We are pretty much certain, you have thoroughly enjoyed all the information and loved it.