How to create scatter chart in React Bootstrap ?

How to create line chart using react bootstrap ?

Scatter plots are used to observe relationship between variables and uses dots to represent the relationship between them. Scatter plots are widely used to represent relation among variables and how a change in one affects the other.

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 { Scatter } from "react-chartjs-2"; 
  
const App = () => { 
  
// Sample data 
const data = { 
      datasets: [ 
        { 
          backgroundColor: 'green', 
          label: 'projectile path', 
          data: [ 
            { 
              x: 1, 
              y: 19 
            }, 
            { 
              x: 2, 
              y: 18.5 
            }, 
            { 
              x: 3, 
              y: 17.6 
            }, 
            { 
              x: 4, 
              y: 16.8 
            }, 
            { 
              x: 5, 
              y: 14 
            }, 
            { 
              x: 6, 
              y: 12 
            }, 
          ] 
        } 
      ] 
    } 
  
return ( 
    <MDBContainer> 
    <Scatter 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:

Output

Tags:

#React-Bootstrap #Bootstrap #ReactJS #Web Technologies

How to create line chart using react bootstrap ?

How to create scatter chart in React Bootstrap ?

App.js

Contact Us