Recharts

Qué es

Recharts es una librería de gráficos para React, mantenida por la comunidad del mismo nombre. Su enfoque es componible: cada gráfico se construye combinando componentes React independientes (ejes, series, leyendas, tooltips). Renderiza con SVG nativo y se apoya en submódulos de D3 para los cálculos, manteniendo las dependencias al mínimo. El código está escrito casi por completo en TypeScript.

Para qué sirve

• Mostrar series de datos en dashboards y paneles de administración con React.
• Crear gráficos de líneas, barras, áreas, tartas, dispersión, radar y más.
• Personalizar la apariencia mediante props y componentes propios sin tocar D3 directamente.
• Integrar visualizaciones en aplicaciones React existentes sin reescribir su arquitectura.

Cuándo usarlo

Es una buena opción cuando trabajas en React y necesitas gráficos habituales con poca configuración y un API declarativo. Si requieres visualizaciones muy a medida o de muy alto rendimiento con grandes volúmenes de datos, conviene valorar alternativas como D3 directamente, Visx o librerías basadas en canvas/WebGL.

Ejemplo

Instalación con npm:

npm install recharts

Un gráfico de líneas básico componiendo los componentes:

import { LineChart, Line, XAxis, YAxis, Tooltip } from “recharts”;

const data = [ { name: “Ene”, ventas: 400 }, { name: “Feb”, ventas: 300 }, { name: “Mar”, ventas: 500 }, ];

function Grafico() { return ( ); }

Puntos clave

• API declarativo y componible: el gráfico se arma con componentes React.
• Renderizado en SVG nativo, ligero y con dependencias mínimas de D3.
• Amplia variedad de tipos de gráfico y personalización vía props y componentes propios.

Ten en cuenta

Recharts está activo y bajo licencia MIT, con versión 3.8.1. Está pensado exclusivamente para React, así que no aplica a otros frameworks. Para escenarios con muchísimos puntos de datos o animaciones muy exigentes, SVG puede quedarse corto frente a soluciones basadas en canvas o WebGL.