Datos · Gráficos
Gráficos
Un solo componente, Chart.astro, cubre todo el catálogo con Chart.js: line/area/bar/radar/scatter/bubble/donut/pie/mixed. Un dashboard necesita tooltip e interacción de verdad, no una ilustración — y donut/pie son tipos nativos de Chart.js (no hace falta otra librería para eso). Entrada animada y progresiva, disparada al entrar en viewport, respeta prefers-reduced-motion.
Line
Serie continua. filled en false — ver Area para la variante rellena.
Area
type="line" + filled: mismo dato, énfasis en volumen/acumulado.
Bar
Vertical, comparativo entre dos series con tono distinto.
Bar horizontal
horizontal: mejor lectura cuando las categorías son nombres largos.
Bar apilado
stacked: composición de un total (goles + asistencias = participación en gol).
Radar
Comparación multiatributo — el caso de uso clásico en analítica de fútbol: jugadores, equipos o porteros, cualquier set de atributos comparables en la misma escala.
Scatter
Correlación entre dos métricas. Sin labels: el eje X es continuo, cada series[].data es {x,y}[].
Bubble
Tres métricas a la vez: X, Y y tamaño (r). data es {x,y,r}[].
Donut, Polar & Pie
Tipos nativos de Chart.js — type="doughnut" / "polarArea" / "pie". Una serie con tones (color por segmento, en el orden de labels). Barrido angular animado de fábrica (animateRotate) + textura por segmento (pattern, default true).
Pie multi-serie
Varias series sobre el mismo labels se dibujan como anillos concéntricos — útil para comparar la misma distribución en dos períodos.
Mixed
Cada serie define su propio kind (bar/line) y axis — dos métricas de escala distinta en un mismo gráfico, sin forzar un solo eje.