How to create scatter chart in 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