React Tutorials

React Js Google Stacked Bar Chart Example Tutorial

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

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.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago