React Js Google Stacked Bar Chart Tutorial

React js Google stacked bar chats example; Through this tutorial, you will learn how to create a google stacked bar chart in react js application.

Google chart library 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.

How to Implement Google Bar Charts in React Js Application

Follow the following steps to create google stacked bar charts in react js app:

• Step 1 – Create React App
• Step 2 – Install Bootstrap & react-google-charts Package
• Step 3 – Create Google Stacked Charts Component
• Step 4 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap & react-google-charts Package

Execute the following command to install react-bootstrap and google charts package into your react app:

npm install bootstrap

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Step 3 – Create Google Stacked bar Charts Component

Visit the src directory of your react js app and create google stacked bar chart component named GoogleBarChart.js. And add the following code into it:

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 GoogleBarChart 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 GoogleBarChart;

The above given code imports the React library and the Component class from it, as well as the Chart component from the “react-google-charts” library. The Chart component allows for the creation of interactive and customizable charts using the Google Charts API.

The code then defines a data variable which contains an array of arrays representing the data for the chart. The first array contains the column headers for the chart, while the subsequent arrays contain the data for each row.

Next, the code defines a class called “GoogleBarChart” which extends the Component class from React. This class defines a constructor method that calls the constructor of the parent class using the “super” keyword.

The render method of this class returns a container div element containing a heading and the Chart component. The Chart component is passed various props including the width and height of the chart, the type of chart to be rendered, the data to be displayed, and various options for customizing the chart’s appearance.

Finally, the GoogleBarChart class is exported as the default export of the module, which allows it to be imported and used in other files.

Step 4 – Add Component in App.js

In this step, you need to add  GoogleBarChart.js file in src/App.js file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleBarChart from './components/GoogleBarChart';


function App() { 
  return (
    <div className="App">
      <GoogleBarChart />
    </div>
  );
}

export default App;

Conclusion

Throughout this tutorial, you have learned how to create react bar chart component in react js application using google charts library.

Recommended React JS Tutorials