Chart.js Components Lab
Laboratorio frontend para construir visualizaciones responsivas, configurables y mantenibles con Chart.js. Ocho tipos de gráfica en vivo, factory pattern, render diferido y tema claro/oscuro sincronizado en vanilla JS.
No es un Gráfico Aislado: es Arquitectura de Visualización
Chart.js expone un API extensa: tipos cartesianos, circulares, multidimensionales, escalas logarítmicas y opciones scriptables. Cada tipo de gráfica parece un caso aparte, con su propia configuración, su propia data y su propio manejo de tema.
Sin una capa de abstracción, muchas configuraciones se vuelven copias del mismo boilerplate. El desafío fue construir un sistema donde añadir un tipo nuevo cueste una entrada en un registro, no cien líneas duplicadas.
Sin arquitectura
- Configuración copiada y pegada por cada gráfica
- Tema oscuro/claro roto en cada instancia
- Charts pesados renderizados de golpe al cargar
- Sin lifecycle: memory leaks al recrear
- Mantenibilidad baja ante un tipo nuevo
Un Sistema de Componentes de Visualización
Factory Pattern
createChart() centraliza la creación con defaults mergeados vía deepMerge().
Registry de Configs
Separar definición de instanciación: cada tipo vive en un registro reutilizable.
Lazy Rendering
IntersectionObserver renderiza cada gráfica al entrar en viewport, con skeleton.
Theming Light/Dark
Archivos separados sincronizan Chart.defaults y escalas sin flicker.
Decisiones con Evidencia en el Código
Contenedores Responsivos
Cada canvas en .cj-chart-canvas-wrap con responsive: true. El chart se adapta al contenedor.
Decimation y Performance
Dataset grande usa algorithm: 'lttb', animation: false para ~2.000 puntos sin jank.
Accessibility Fallback
Cada canvas lleva role="img" + aria-label. Tabla HTML alternativa en <details>.
El Sistema en Números
Tipos de gráfica
Puntos decimados (LTTB)
Temas (light / dark)
Dependencias de build
01 — Seis familias visuales del catálogo de ocho tipos
02 — Arquitectura en capas: datos → registry → factory → render → theme → canvas
Ocho Gráficas, Un Sistema
Gráfica de Línea
LineVer datos en tabla
| Mes | 2026 | 2025 |
|---|---|---|
| Ene | 12 | 8 |
| Feb | 19 | 14 |
| Mar | 15 | 11 |
| Abr | 25 | 18 |
| May | 22 | 16 |
| Jun | 30 | 22 |
| Jul | 28 | 20 |
| Ago | 35 | 27 |
| Sep | 40 | 32 |
| Oct | 38 | 30 |
| Nov | 45 | 36 |
| Dic | 50 | 42 |
Gráfica de Barras
BarVer datos en tabla
| Framework | Popularidad (%) |
|---|---|
| React | 42 |
| Vue | 28 |
| Angular | 18 |
| Svelte | 12 |
| Astro | 15 |
| Next.js | 35 |
Gráfica de Dona
DoughnutVer datos en tabla
| Rol | Porcentaje |
|---|---|
| Frontend | 40% |
| Backend | 25% |
| DevOps | 15% |
| Diseño | 12% |
| QA | 8% |
Gráfica Radar
RadarVer datos en tabla
| Dimensión | Stack A | Stack B |
|---|---|---|
| Velocidad | 85 | 70 |
| Fiabilidad | 90 | 65 |
| Comodidad | 78 | 88 |
| Seguridad | 88 | 75 |
| Escalabilidad | 72 | 90 |
| DX | 95 | 60 |
Gráfica de Área Polar
Polar AreaVer datos en tabla
| Tecnología | Nivel |
|---|---|
| JavaScript | 90 |
| TypeScript | 78 |
| React | 85 |
| Node.js | 70 |
| CSS | 75 |
| Python | 60 |
Gráfica de Dispersión
ScatterVer datos en tabla
| Proyecto | Experiencia (años) | Complejidad |
|---|---|---|
| P01 | 1 | 2 |
| P02 | 2 | 3 |
| P03 | 3 | 2.5 |
| P04 | 4 | 5 |
| P05 | 5 | 4 |
| P06 | 6 | 6 |
| P07 | 7 | 5.5 |
| P08 | 8 | 7 |
| P09 | 9 | 6.5 |
| P10 | 10 | 8.5 |
Gráfica de Burbujas
BubbleVer datos en tabla
| Área | Madurez | Impacto | Peso |
|---|---|---|---|
| Frontend | 4 | 7 | 12 |
| Frontend | 6 | 8 | 18 |
| Frontend | 8 | 9 | 15 |
| Backend | 3 | 6 | 10 |
| Backend | 5 | 7 | 16 |
| Backend | 7 | 9 | 13 |
| DevOps | 5 | 4 | 8 |
| DevOps | 7 | 6 | 11 |
| DevOps | 9 | 7 | 14 |
Gráfica Mixta (Barra + Línea)
MixedVer datos en tabla
| Tecnología | Horas | Productividad (%) |
|---|---|---|
| JavaScript | 320 | 65 |
| TypeScript | 280 | 78 |
| React | 250 | 85 |
| Vue | 180 | 72 |
| Node.js | 220 | 80 |
| CSS | 150 | 90 |
Herramientas del Laboratorio
Núcleo
Plugins
Patrones
Accesibilidad
¿Necesitas dashboards claros y mantenibles?
Construí sistemas de visualización reutilizables sobre Chart.js: performance, accesibilidad y tema claro/oscuro.