Open In App

How to draw a bubble chart in react bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

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:

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.

Javascript




//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:

Original



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads