Si trabajas en un proyecto en React y necesitas añadir gráficos simples —barras, líneas, áreas, pasteles—, Recharts suele ser una buena opción. Permitee una integración directa: trabaja con JSX, se basa en D3 (pero sin toda su complejidad) y tiene buena documentación.

Instalación rápida

Para instalarlo podemos ejecutar:

npm install recharts

Y luego lo importamos directamente en nuestros componentes:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

A partir de ahí, podemos usarlo como cualquier otro componente de React.

Un ejemplo simple

Supongamos que tenemos este conjunto de datos:

const data = [
  { name: 'Enero', ventas: 400 },
  { name: 'Febrero', ventas: 300 },
  { name: 'Marzo', ventas: 500 },
  { name: 'Abril', ventas: 200 },
];

Podemos crear un gráfico de líneas básico así:

<LineChart width={500} height={300} data={data}>
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="ventas" stroke="#8884d8" />
</LineChart>

Con este componente creamos un gráfico lineal.

¿Y si necesitamos algo más complejo?

En ese caso, es probable que necesitemos otra herramienta. Recharts es bueno para casos donde los gráficos deben ser reactivos, pero no excesivamente interactivos. Para visualizaciones más pesadas o interacciones más complejas, es recomendable mirar otras bibliotecas como D3.

Pero para lo que hacemos en el 80% de los proyectos —mostrar métricas básicas en tiempo real, comparar series, visualizar datos históricos—, Recharts es suficiente.