¿Cómo crear un gráfico de líneas usando el arranque de reacción?

Los gráficos de líneas se utilizan para representar la relación entre dos datos X e Y en un eje diferente. Uno de los ejes del gráfico representa las categorías específicas que se comparan, mientras que el otro eje representa los valores medidos correspondientes a esas categorías.

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 { Line } from "react-chartjs-2";
  
const App = () => {
  
  // Sample data
  const data = {
    labels: ["Sunday", "Monday", "Tuesday",
      "Wednesday", "Thursday", "Friday", "Saturday"],
    datasets: [
      {
        label: "Hours Studied in Geeksforgeeks",
        data: [2, 5, 7, 9, 7, 6, 4],
        fill: true,
        backgroundColor: "rgba(6, 156,51, .3)",
        borderColor: "#02b844",
      }
    ]
  }
  
  return (
    <MDBContainer>
      <Line 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: