El recharts.js es una biblioteca de gráficos redefinida construida con React y D3. Ayuda a crear gráficos de líneas interactivos, gráficos de barras, gráficos circulares, etc. Uno de los principios fundamentales es que todos sus componentes son independientes, livianos y se pueden implementar fácilmente.
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: ahora vaya a la línea de comando e instale la biblioteca recargar.js
npm install recharts
Estructura del proyecto : Se verá como lo siguiente.
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. Generaremos un gráfico de líneas simple usando componentes de la biblioteca y datos JS, usando el componente base de clase
App.js
import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
const data = [
{
name: "Block A",
l1: 4000,
l2: 2400,
amt: 2400,
},
{
name: "Block B",
l1: 3000,
l2: 1398,
amt: 2210,
},
{
name: "Block C",
l1: 2000,
l2: 9800,
amt: 2290,
},
{
name: "Block D",
l1: 2780,
l2: 3908,
amt: 2000,
},
];
export default function App() {
return (
<div style={{ width: "1100px",
height: "600px",
backgroundColor: "black" }}>
<ResponsiveContainer width="100%"
height="100%">
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="l2"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line type="monotone"
dataKey="l1"
stroke="#82ca9d" />
</LineChart>
</ResponsiveContainer>
</div>
);
}
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.
Publicación traducida automáticamente
Artículo escrito por akshitaverma102001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA