React Tutorials

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.

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 Js Google Org Chart Integration Example Tutorial

Organizational hierarchy defines the roles and responsibilities of a person within an organization. Being a…

3 days ago

Ionic 5 Keyboard with Cordova and Ionic Native Tutorial

The keyboard helps users type whatever they want; in ionic apps, adding a keyboard is…

6 days ago

React Js Multiple Line Chart with Google Charts Tutorial

How do you show data on charts that change over time? If you don't know…

1 week ago

React Js Google Line and Box Intervals Charts Tutorial

In this quick tutorial, we will learn how to create interval charts in React application.…

2 weeks ago

React Js Histogram / Segmented Columns Chart Tutorial

In this tutorial, you will learn how to display data in a histogram chart in…

2 weeks ago

How to Create Google Geo or Region Chart in React Js

What if? If you have to display the data based on a country, continent, region…

3 weeks ago