¿Cómo crear un gráfico de dispersión en React Bootstrap?

Los diagramas de dispersión se utilizan para observar la relación entre las variables y utilizan puntos para representar la relación entre ellas. Los diagramas de dispersión se utilizan ampliamente para representar la relación entre variables y cómo un cambio en una afecta a la otra.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando.

  npm install --save mdbreact react-chartjs-2

• Paso 4: agregue Bootstrap CSS y fontawesome CSS a index.js.

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

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción