Gráficos y Visualización de Datos

¿Qué hace Gráficos y Visualización de Datos?

Reglas

• Usa Recharts para proyectos React — componible, responsive, bien tipado.
• Envuelve los gráficos en <ResponsiveContainer width="100%" height={300}> — nunca uses anchos fijos en píxeles.
• Colores accesibles: usa una paleta segura para daltonismo (no confíes en la distinción rojo/verde).
• Etiquetas de ejes: etiqueta siempre ambos ejes, usa formato de números legible (1.2K en lugar de 1200).
• Tooltips: muestra valores exactos al pasar el cursor — con formato de unidades y números sensibles a la configuración regional.
• Estados de carga: forma de gráfico esqueleto mientras los datos se cargan.
• Elige el tipo de gráfico según los datos: línea (tendencias en el tiempo), barras (comparaciones), área (volumen), pastel (partes de un todo — máximo 5 sectores).
• Propiedad key en datos dinámicos — Recharts se re-renderiza correctamente cuando los datos cambian.

Evitar

• Gráficos 3D — distorsionan la percepción, usa siempre plano/2D.
• Gráficos de pastel con más de 5-6 sectores — usa un gráfico de barras horizontal en su lugar.
• Gráficos sin etiquetas de eje o leyendas — proporciona siempre contexto.
• Obtener datos dentro de componentes de gráfico — obtén los datos en el componente padre y pásalos como props.