How to draw a bubble chart in react bootstrap ?

23 October 2023

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.

Creating 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: It will look like the following.

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: 'Geeksforneveropen', 
          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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

App.js

LEAVE A REPLY