Visualizar datos convierte números planos en información accionable, y aquí es donde Chart.js entra al rescate. Aprenderás a integrar esta librería en un proyecto JavaScript puro para renderizar una gráfica de barras a partir de un histograma de hábitos, ideal si estás construyendo dashboards sencillos sin frameworks.
¿Qué es Chart.js y por qué usarla para visualizar datos?
Chart.js es una librería de graficación hecha en HTML que usa Canvas como motor de render. Es liviana, popular y ofrece varios tipos de gráficas listas para incorporar en tus proyectos.
La clave está en su sencillez: le pasas un tipo de gráfica (bar, line, etc.), unos labels y unos datos, y ella se encarga del renderizado visual. Nada de configuraciones eternas para empezar.
¿Qué es Chart.js? Una librería JavaScript de código abierto que renderiza gráficas usando el elemento canvas del navegador. Es de las opciones más comunes por su curva de aprendizaje corta y su documentación clara.
¿Cómo instalar Chart.js sin usar un bundler?
Cuando trabajas en un proyecto Vanilla.js, sin building ni empaquetadores, la forma más directa de sumar Chart.js es importar su script vía CDN. Ellos te dan una URL que apunta a un archivo JavaScript minificado y ofuscado, para que el navegador lo procese rápido al estar comprimido.
Basta con agregar ese <script> a tu HTML y ya tienes acceso a toda la API de la librería. Sin npm install, sin configuraciones extra.
¿Cómo estructurar los datos para un bar chart?
Antes de graficar, tienes que entender cómo Chart.js espera recibir la información. Y aquí viene lo interesante: cada motor de gráficas tiene su propio formato de entrada.
Chart.js pide dos arrays lineales separados:
- Un array de labels con las etiquetas de cada barra.
- Un array de data con los valores numéricos.
- La coincidencia se hace por posición: el label en la posición cero va con el valor en la posición cero.
Si el primer label es red y el primer valor es 12, la librería intuye que red vale 12. Simple, pero exige que tú alinees bien los arrays antes de pasarlos.
¿Por qué la manipulación de arrays es tan importante al graficar?
Porque los datos que recibes casi nunca vienen en el formato exacto que tu motor de gráficas necesita. En Chart.js quizás mandes labels y data por separado, pero en D3 u otra librería podrías necesitar un array de objetos con propiedades X y Y.
Ahí es donde métodos como map, Object.keys y Object.values cobran sentido real. Transformas la estructura original para que el motor la entienda.
¿Qué hace Object.keys en este caso? Extrae todas las claves de un objeto y las devuelve como array. Si tu histograma es {lunes: 3, martes: 5}, obtienes ['lunes', 'martes'], perfecto para usarlos como labels.
¿Cómo implementar Chart.js con ayuda de un agente de IA?
El flujo se vuelve mucho más rápido si delegas la escritura repetitiva a un agente como el de Cursor, siempre que sepas qué está pasando por debajo. La instrucción fue clara: crear un gráfico usando Chart.js con el resultado de la función del histograma, en un proyecto Vanilla.js sin frameworks.
Para guiar mejor al agente, se le envió como contexto el snippet de instalación de la documentación oficial. Con eso, el agente entiende exactamente qué versión y qué API usar.
¿Qué cambios hace el agente en el HTML y en el JS?
La implementación esperada incluye tres modificaciones concretas:
- Incorporar el script del CDN de Chart.js en el
index.html.
- Crear un elemento
<canvas> con un ID único que sirva de contenedor.
- En el JS, referenciar ese canvas y pasarle labels y data ya procesados.
El agente añadió una section con el canvas y ubicó el script del CDN al final del HTML. En la función de renderizado creó el contexto, extrajo las keys y los values del objeto de resultados, y armó el bar chart con colores por barra.
¿Qué prácticas del código generado conviene revisar?
No todo lo que genera la IA es óptimo. En este caso, el agente guardó una instancia del chart y hacía un destroy antes de recrearla, algo innecesario para este flujo. La instrucción correctiva fue: no guardar la instancia, crearla cada vez que se necesite.
Una práctica que sí sumó valor: un return temprano si el ID del canvas no existe en el HTML. Evita seguir ejecutando lógica sobre un elemento inexistente.
¿Cómo hacer que la gráfica sea reactiva a nuevos datos?
Una gráfica estática pierde utilidad si tus datos cambian. Para que el bar chart se actualice cuando marcas un nuevo hábito, tienes que disparar la función de renderizado cada vez que ocurra ese evento.
En la práctica, dentro de la función que hace el check-in del hábito, llamas de nuevo al render de la gráfica. Así se recalculan los valores y el canvas se repinta con la información actualizada. Ese pequeño trigger convierte tu visualización en algo vivo.
Con esta base ya tienes una gráfica de barras funcional en JavaScript puro, con datos reales y reactividad básica. ¿Qué otra librería de graficación te gustaría probar después?
