React Js Google Bubble Chart Tutorial Example

If you are someone who hasn’t integrated charts before in react, then this tutorial will tell you how to create a Bubble chart component in React js app.

How to embed bubble chart in react with static data and how to display the multi-dimension information on bubble charts using the Google React charts js plugin.

Chart’s job is to display data profoundly to users; charts play a vital role in business decision-making. Being a react developer, you might get a task to implement a chart in React js application.

A bubble chart is usually 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 better understanding, we will find out the correlation between Life Expectancy’, ‘Fertility Rate’, ‘Region’, ‘Population through bubble chart in react js.

How to Integrate Google Bubble Chart in React Js App

• Step 1: Install React App
• Step 2: Add Bootstrap Library
• Step 3: Add Google Charts Package
• Step 4: Create Google Bubble Chart Component
• Step 5: Update App Js File
• Step 6: Start React App

Install React App

Start installing the new React app; if the app is already installed, then move on to the subsequent step.

npx create-react-app react-blog

Now that new react app skeleton has been created, step inside the app directory.

cd react-blog

Add Bootstrap Library

You may use Bootstrap CSS to style the layout, execute command to install the Bootstrap library.

npm install bootstrap

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;

Add Google Charts Package

In this step, you will be using the mentioned command to add the Google React js charts library.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Google Bubble Chart Component

Let us create the new components/ folder, after that create GoogleChart.js file within the folder.

Now that component is ready, your next step is to add the given below code into the GoogleChart.js file.

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;

Update App Js File

In the previous step, we created the component since we are not using the router for navigation. Hence, it is imperative to add the GoogleChart 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 moving at the right pace, and now, you need to start the react development server.

To start the app, type and execute the given command.

npm start

Conclusion

Various types of charts and graphs help us to deal with simple to complex information. Ideally, line graphs, column charts, pie charts, bar charts are the most common that we know.

In this React Bubble chart integration example, everything that you should be aware of. The react bubble chart with multiple series data example is over.