Cree un gráfico de barras apiladas usando Recharts en ReactJS

Introducción: Rechart JS es una biblioteca que se utiliza para crear gráficos para React JS. Esta biblioteca se utiliza para crear gráficos de líneas, gráficos de barras, gráficos circulares, etc., con la ayuda de React y D3 (documentos basados ​​en datos).  

Un gráfico de barras apiladas es la extensión de un gráfico de barras básico. Muestra varios datos discretos en el mismo gráfico de barras para una mejor comparación de los datos. 

Enfoque: para crear un gráfico de barras apiladas, usamos el componente BarChart del paquete npm de recharts. En primer lugar, creamos una cuadrícula cartesiana y un eje X y un eje Y. Luego, agregue múltiples gráficos de barras usando el componente Bar y para apilarlos uno encima del otro, use el mismo stackId para todos los gráficos.

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 recharts

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: En este ejemplo, crearemos un gráfico de barras apiladas básico utilizando el componente BarChart y Bar del paquete npm recharts. Para apilar las dos barras una encima de la otra, agregaremos el mismo stackId a ambos componentes de la barra. 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 { BarChart, Bar, XAxis, YAxis, 
    CartesianGrid } from 'recharts';
  
const App = () => {
  
    // Sample data
    const data = [
        { name: 'A', x: 12, y: 23, z: 122 },
        { name: 'B', x: 22, y: 3, z: 73 },
        { name: 'C', x: 13, y: 15, z: 32 },
        { name: 'D', x: 44, y: 35, z: 23 },
        { name: 'E', x: 35, y: 45, z: 20 },
        { name: 'F', x: 62, y: 25, z: 29 },
        { name: 'G', x: 37, y: 17, z: 61 },
        { name: 'H', x: 28, y: 32, z: 45 },
        { name: 'I', x: 19, y: 43, z: 93 },
    ];
  
    return (
        <BarChart width={500} height={500} data={data} >
            <CartesianGrid />
            <XAxis dataKey="name" />
            <YAxis />
            <Bar dataKey="x" stackId="a" fill="#8884d8" />
            <Bar dataKey="y" stackId="a" fill="#82ca9d" />
        </BarChart>
    );
}
  
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

Ejemplo 2: En este ejemplo, cambiaremos el color de las barras usando la propiedad de relleno. Para agregar una información sobre herramientas que mostrará información sobre la barra al pasar el mouse y una leyenda que mostrará etiquetas para barras apiladas, usaremos el componente Información sobre herramientas y el componente Leyenda. Ahora cambie el siguiente código en el archivo App.js. 

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid,
        Legend, Tooltip } from 'recharts';
  
const App = () => {
  
    // Sample data
    const data = [
        { name: "A", x: 30, y: 70 },
        { name: "B", x: 12, y: 88 },
        { name: "C", x: 15, y: 85 },
        { name: "D", x: 35, y: 65 },
        { name: "E", x: 54, y: 46 },
        { name: "F", x: 72, y: 28 },
        { name: "G", x: 32, y: 68 }
    ];
  
    return (
        <BarChart width={500} height={500} data={data} >
            <CartesianGrid />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="x" stackId="a" fill="aqua" />
            <Bar dataKey="y" stackId="a" fill="green" />
        </BarChart>
    );
}
  
export default App;

Salida: Guarde el proyecto usando CTRL+S . Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción