React Js Google Bubble Chart Example Tutorial

Google Bubble Charts are an interactive data visualization tool that displays data in the form of bubbles on a graph. Each bubble represents a data point, and the size of the bubble represents the value of the data point. In this tutorial, you will explore how to implement Google Bubble Charts in a React 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.

How to Implement Google Bubble Charts in React Js Application

Follow the following steps and create google bubble charts in react js app:

• Step 1 – Create React App
• Step 2 – Install Bootstrap & react-google-charts Package
• Step 3 – Create Google Bubble Chart 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

To begin, you need to install bootstrap and react-google-charts library. This library provides a React component that we can use to render Google Charts in our application. To install the library, run the following command in your terminal:

npm install bootstrap

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Step 3 – Create Google Bubble Charts Component

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

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

The given code is an implementation of a Google Bubble Chart in React JS. Here is a summary of the code:

1. The React and Component modules are imported from the react package, and the Chart module is imported from the react-google-charts package.
2. The data array contains the data to be displayed in the chart. It includes information about various countries such as life expectancy, fertility rate, region, and population.
3. The GoogleBubbleChart class is defined as a child of the Component class.
4. In the render() method of the GoogleBubbleChart class, a div container is created with a h2 tag for the chart’s heading.
5. The Chart component is used to render the bubble chart. It accepts various props, including the chart’s width and height, loader message, chart type, data, and options.
6. The options prop contains the chart’s title, horizontal and vertical axis titles, and the bubble text style.
7. The rootProps prop is used to add a data-testid attribute to the chart’s root element, which can be used for testing purposes.
8. Finally, the GoogleBubbleChart component is exported as the default export, making it available to other components.

Step 4 – Add Component in App.js

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

import React from 'react';

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


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

export default App;

Conclusion

In this article, we explored how to implement Google Bubble Charts in a React application using the react-google-charts library. We prepared our data by formatting it in a way that the chart can understand, and then used the BubbleChart component to render the chart with the specified options. With this knowledge, you can now use Google Bubble Charts to visualize your data in a clear and interactive way in your React applications.

Recommended React JS Tutorials