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

RechartJS es una biblioteca que se utiliza para crear gráficos para ReactJS. 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).  

El gráfico de áreas apiladas es la extensión de un gráfico de áreas básico. Muestra varios datos continuos en el mismo gráfico de área para una mejor comparación de datos. Un gráfico de áreas combina el gráfico de líneas y el gráfico de barras para demostrar la desviación del valor numérico sobre una determinada variable progresiva.

Enfoque: para crear un gráfico de áreas apiladas, usamos el componente AreaChart 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 área usando el componente de área y colóquelos uno encima del otro. Usamos 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: aquí, crearemos un gráfico de área apilado básico usando AreaChart y el componente de área del paquete npm de recharts. Para apilar los dos componentes del gráfico de área uno encima del otro, agregaremos el mismo stackId a ambos componentes del área.

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 {AreaChart, Area, XAxis, YAxis, 
    CartesianGrid, 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 (
    <AreaChart width={500} height={700} data={data}>
        <CartesianGrid/>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area dataKey="x" stackId="1" 
            stroke="green" fill="green" />
        <Area dataKey="y" stackId="1" 
            stroke="blue" fill="blue" />
    </AreaChart>
    );
}
   
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:

Ejemplo 2: aquí, para convertir esto de un gráfico de área a un gráfico curvo, estableceremos la propiedad de tipo en monotono. Y si queremos que los gráficos de área se apilen uno encima del otro y el tercero los superponga en lugar de apilarlos, le daremos una ID de pila diferente a uno que necesita superponerse y lo mismo a aquellos que deben apilarse.

Ahora cambie el siguiente código en el archivo App.js. 

import React from 'react';
import {AreaChart, Area, 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:42, y:35,  z:23},
        {name:'E', x:51, y:45,  z:20},
        {name:'F', x:16, y:25,  z:29},
        {name:'G', x:17, y:17,  z:61},
        {name:'H', x:81, y:32,  z:45},
        {name:'I', x:19, y:43,  z:93},
    ];
   
    return (
    <AreaChart width={500} height={700} data={data}>
        <CartesianGrid/>
        <XAxis dataKey="name" />
        <YAxis />
        <Area type="monotone" dataKey="x" 
            stackId="1" stroke="black" fill="black" />
        <Area type="monotone" dataKey="y" 
            stackId="1" stroke="blue" fill="blue" />
        <Area type="monotone" dataKey="z" 
            stackId="2" stroke="green" fill="green" />
    </AreaChart>
    );
}
   
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

Referencia: https://recharts.org/en-US/examples