How to draw a bubble chart in react bootstrap ?

A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (x, y, r) of associated data is plotted as a disk that expresses two of the xy values through the disk’s xy location and the third through its size.

Prerequisites

• Knowledge of React
• Bootstrap and React Bootstrap
• Chart JS or Recharts Library
• Node JS and npm/yarn Installed

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the required modules using the following command.

npm install --save mdbreact react-chartjs-2

Step 4: Add Bootstrap CSS and fontawesome CSS to index.js.

import '@fortawesome/fontawesome-free/css/all.min.css';  
import 'bootstrap-css-only/css/bootstrap.min.css';  
import 'mdbreact/dist/css/mdb.css';

Project Structure:

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

//App.js

import React from "react";
import { MDBContainer } from "mdbreact";
import { Bubble } from "react-chartjs-2";

const App = () => {

    // Sample data
    const data = {
        datasets: [
            {
                label: 'Geeksforgeeks',
                data: [
                    {
                        x: 2,
                        y: 8,
                        r: 20,
                    }
                ],
                backgroundColor: 'green',
            },
            {
                label: 'Technical Scripter',
                data: [
                    {
                        x: 5,
                        y: 6,
                        r: 40,
                    }
                ],
                backgroundColor: 'yellow',
            },
            {
                label: 'Geeks',
                data: [
                    {
                        x: 9,
                        y: 3,
                        r: 22,
                    }
                ],
                backgroundColor: 'pink',
            }
        ]
    }

    return (
        <MDBContainer>
            <Bubble data={data} />
        </MDBContainer>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: