Gráfica de barras con Chart.js en Vanilla JS

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:53

Gráfica de barras con Chart.js en Vanilla JS

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 17 de 24

Clase 17 / 24

Recursos

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?

Resumen

¿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?

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?

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?

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.

¿Qué prácticas del código generado conviene revisar?

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?

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?

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Gráfica de barras con Chart.js en Vanilla JS

Progreso del curso

Grabacion

Recursos

Recursos