React JS Tutorial- Google Bubble Chart Example

React js Google Bubble 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.

If you are a novice and haven’t used a chart in your applications earlier, then, in this tutorial, we will learn how to create a Bubble Chart in React Js application by using the react-google-charts library.

In this guide, we will learn to embed bubble charts in React with static data and how to display multi-dimension information on bubble charts.

 

A bubble chart is often used for showing three dimensions of information. Every object with its triplet of linked data is plotted as a disk that exposes two of the vᵢ values through the disk’s xy location and the third by its size.

For a better understanding, we will find out the correlation between ‘Life Expectancy’, ‘Fertility Rate’, ‘Region’, ‘Population’ through a bubble chart in React js.

How To Integrate Google Bubble 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 Library

Step 3: Add Google Charts Package

Step 4: Create Google Bubble Char Component

Step 5: Update App js File

Step 6:  Start React App

 

Step 1- Install React App

In the very step, we will install a new React App. If you are already done with it, then jump on to the next step:

npx create-react-app react-blog

Now, after we have downloaded the new react app, we will move inside the app directory:

cd react-blog

 

Step 2- Add Bootstrap Library

Further, we may use Bootstrap CSS to style the layout. for which we will have to execute the following command:

Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.

npm install bootstrap

 

Here, we open the App.js file and import the Bootstrap CSS.

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

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

Step 3- Add 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 we will invoke to add the package into the React app.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Create Google Bubble Chart Component

Here, in this step, we have to create components/folder. After that, we will create GoogleChart.js file. Into this file.

Now, since that component is ready, we will add all the given code into the GoogleChart.js::

import React, { Component } from "react";
import Chart from "react-google-charts";

const data = [
  ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
  ['CAN', 80.66, 1.67, 'North America', 33739900],
  ['DEU', 79.84, 1.36, 'Europe', 81902307],
  ['DNK', 78.6, 1.84, 'Europe', 5523095],
  ['EGY', 72.73, 2.78, 'Middle East', 79716203],
  ['GBR', 80.05, 2, 'Europe', 61801570],
  ['IRN', 72.49, 1.7, 'Middle East', 73137148],
  ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
  ['ISR', 81.55, 2.96, 'Middle East', 7485600],
  ['RUS', 68.6, 1.54, 'Europe', 141850000],
  ['USA', 78.09, 2.05, 'North America', 307007000],
];

class GoogleChart extends Component {
  
  constructor(props) {
    super(props)
  }

  render() {
      return (
          <div className="container mt-5">
              <h2>Bubble Chart in React Js Example</h2>

              <Chart
                width={'700px'}
                height={'320px'}
                loader={<div>Loading Chart</div>}
                chartType="BubbleChart"
                data={data}
                options={{
                  title:
                    'Correlation between life expectancy, fertility rate ' +
                    'and population of some world countries (2010)',
                  hAxis: { title: 'Life Expectancy' },
                  vAxis: { title: 'Fertility Rate' },
                  bubble: { textStyle: { fontSize: 11 } },
                }}
                rootProps={{ 'data-testid': '1' }}
              />           
          </div>
      )
  }
}

export default GoogleChart;

Step 5- Update App Js File

Here, we will add the GoogleChart component in 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;

Step 6- Start React App

In this step, we are done with the bubble chart component building process. 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

Various types of charts and graphs help us to deal with simple as well as complex information.

Some commonly known graphs and charts are line graphs, column charts, pie charts, bar charts.

 

Thanks