Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

CREAR GRÁFICOS DE BARRAS Y LÍNEAS CON CHART.JS EN ANGULAR

October 25, 2025

Introducción a la creación de gráficos en Angular con Chart.js

La visualización de datos es un componente esencial en el desarrollo de aplicaciones web modernas. Los gráficos permiten a los desarrolladores representar información compleja de manera clara y atractiva, facilitando la comprensión de tendencias y patrones. En este tutorial, exploraremos cómo utilizar Chart.js, una biblioteca de JavaScript potente y flexible, para crear gráficos de barras y líneas en una aplicación Angular. Este tutorial está diseñado para desarrolladores con conocimientos básicos de Angular y TypeScript que deseen implementar visualizaciones de datos interactivas en sus proyectos.

Chart.js es una biblioteca de código abierto que permite construir gráficos dinámicos y personalizables sin dependencias externas. Es ideal para proyectos que requieren representar datos de manera visual, como ventas, tendencias económicas o métricas de rendimiento. A lo largo de este artículo, aprenderás a instalar las herramientas necesarias, configurar un proyecto Angular, e implementar gráficos de barras y líneas con ejemplos prácticos y código detallado.

¿Qué es Chart.js?

Chart.js es una biblioteca de JavaScript diseñada para la creación de gráficos interactivos y responsivos. Es conocida por su simplicidad y capacidad para generar visualizaciones complejas con un código mínimo. Entre los tipos de gráficos soportados se encuentran barras, líneas, circulares, de dispersión, entre otros. La biblioteca no depende de otras como jQuery o D3, lo que la hace ligera y fácil de integrar. Además, Chart.js ofrece opciones avanzadas como animaciones, tooltips interactivos y eventos de clic, lo que mejora la experiencia del usuario.

Desarrollada por la comunidad y mantenida activamente, Chart.js es de código abierto y puede usarse en proyectos comerciales o personales sin restricciones. Su diseño modular permite personalizar los gráficos según las necesidades del proyecto, desde colores y etiquetas hasta animaciones y escalas. En este tutorial, nos enfocaremos en crear gráficos de barras y líneas para mostrar datos de ventas y ganancias, pero los conceptos son aplicables a otros tipos de gráficos.

Prerrequisitos

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos:

  • Conocimientos básicos de HTML, CSS y TypeScript, especialmente en conceptos orientados a objetos como clases y métodos.
  • Node.js versión 16 o superior instalado, junto con un administrador de paquetes como npm o Yarn. Puedes descargar Node.js desde su sitio oficial.
  • Un entorno de desarrollo configurado, como Visual Studio Code, para editar el código.

Estos requisitos son esenciales para seguir el tutorial sin problemas. Si no tienes Node.js instalado, descárgalo e instálalo antes de continuar.

Instalación de Angular CLI

Angular CLI es una herramienta oficial que simplifica la creación, configuración y desarrollo de aplicaciones Angular. Para instalarla globalmente, ejecuta el siguiente comando en una terminal:

npm install -g @angular/cli

Este comando instala la versión más reciente de Angular CLI. Si ya la tienes instalada, verifica que esté actualizada ejecutando:

ng update @angular/cli @angular/core

Angular CLI proporciona comandos para generar proyectos, componentes y otros elementos, lo que agiliza el desarrollo.

Creación de una aplicación Angular

Para crear una nueva aplicación Angular que contenga nuestros gráficos, ejecuta el siguiente comando en la terminal:

ng new angular-chartjs

Durante el proceso, Angular CLI te preguntará si deseas agregar enrutamiento y qué formato de estilos prefieres (CSS, SCSS, etc.). Para este tutorial, selecciona CSS y omite el enrutamiento para mantener la simplicidad. Una vez creado el proyecto, navega al directorio e inicia el servidor de desarrollo:

cd angular-chartjs
ng serve -o

Este comando compila la aplicación y abre un navegador en http://localhost:4200/, donde podrás ver la aplicación Angular en ejecución. Mantén el servidor corriendo para ver los cambios en tiempo real.

Instalación de Chart.js

Para usar Chart.js en el proyecto, instala la biblioteca ejecutando el siguiente comando en una nueva terminal dentro del directorio del proyecto:

npm install chart.js

Este comando agrega Chart.js al proyecto como una dependencia. No se requieren configuraciones adicionales, ya que Angular maneja las dependencias automáticamente.

Creación de componentes para los gráficos

Para organizar el código, crearemos dos componentes Angular: uno para el gráfico de barras y otro para el gráfico de líneas. Usa Angular CLI para generarlos con los siguientes comandos:

ng generate component bar-chart
ng generate component line-chart

Estos comandos crean dos carpetas (bar-chart y line-chart) en el directorio src/app, cada una con los archivos necesarios para un componente Angular (HTML, CSS, TypeScript y un archivo de pruebas).

Creación de un gráfico de barras con Chart.js

Los gráficos de barras son ideales para comparar valores entre categorías, como ventas diarias o métricas de rendimiento. En este apartado, configuraremos un gráfico de barras que muestre datos de ventas y ganancias diarias durante un período de 8 días.

Configuración del componente de barras

Abre el archivo bar-chart.component.html en la carpeta src/app/bar-chart y reemplaza su contenido con el siguiente código:

<div class="chart-container">
    <canvas id="MyChart">{{ chart }}</canvas>
</div>

Este código crea un contenedor con un elemento <canvas> donde se renderizará el gráfico. El atributo id="MyChart" es esencial para que Chart.js identifique el lienzo donde dibujar el gráfico.

Importación de Chart.js

En el archivo bar-chart.component.ts, importa Chart.js con la siguiente línea al inicio del archivo:

import Chart from "chart.js/auto";

La importación chart.js/auto incluye todos los módulos necesarios de Chart.js, asegurando que el gráfico funcione correctamente.

Definición del gráfico

Declara una variable para almacenar el gráfico en el archivo bar-chart.component.ts:

public chart: any;

Luego, crea un método createChart que configure el gráfico de barras. Agrega el siguiente código dentro de la clase BarChartComponent, debajo del método ngOnInit:

createChart() {
  this.chart = new Chart("MyChart", {
    type: 'bar',
    data: {
      labels: ['2025-10-18', '2025-10-19', '2025-10-20', '2025-10-21',
               '2025-10-22', '2025-10-23', '2025-10-24', '2025-10-25'],
      datasets: [
        {
          label: "Ventas",
          data: [467, 576, 572, 79, 92, 574, 573, 576],
          backgroundColor: 'blue'
        },
        {
          label: "Ganancias",
          data: [542, 542, 536, 327, 17, 0, 538, 541],
          backgroundColor: 'limegreen'
        }
      ]
    },
    options: {
      aspectRatio: 2.5
    }
  });
}

Este código define un gráfico de barras con dos conjuntos de datos: ventas (en azul) y ganancias (en verde lima). Las etiquetas en el eje X representan fechas, y los valores en el eje Y son los datos numéricos. La opción aspectRatio controla la proporción del gráfico para garantizar que se vea bien en diferentes tamaños de pantalla.

Inicialización del gráfico

Para que el gráfico se renderice al cargar el componente, llama al método createChart en el método ngOnInit:

ngOnInit(): void {
  this.createChart();
}

Integración en la aplicación

Para mostrar el gráfico, agrega el selector del componente al archivo app.component.html. Reemplaza el contenido predeterminado con:

<app-bar-chart></app-bar-chart>

Guarda los cambios y verifica que el servidor de desarrollo esté ejecutando (ng serve). Al abrir http://localhost:4200/, deberías ver un gráfico de barras que muestra las ventas y ganancias diarias.

Creación de un gráfico de líneas con Chart.js

Los gráficos de líneas son perfectos para visualizar tendencias a lo largo del tiempo, como el crecimiento de ventas o cambios en métricas continuas. En este apartado, crearemos un gráfico de líneas usando el mismo conjunto de datos que el gráfico de barras.

Configuración del componente de líneas

Abre el archivo line-chart.component.html en la carpeta src/app/line-chart y agrega el siguiente código:

<div class="chart-container">
    <canvas id="MyChart">{{ chart }}</canvas>
</div>

Este código es idéntico al usado en el componente de barras, ya que Chart.js utiliza un elemento <canvas> para ambos tipos de gráficos.

Importación y definición del gráfico

En el archivo line-chart.component.ts, importa Chart.js e incluye la variable chart:

import Chart from 'chart.js/auto';

public chart: any;

Crea el método createChart con el siguiente código, cambiando el tipo de gráfico a line:

createChart() {
  this.chart = new Chart("MyChart", {
    type: 'line',
    data: {
      labels: ['2025-10-18', '2025-10-19', '2025-10-20', '2025-10-21',
               '2025-10-22', '2025-10-23', '2025-10-24', '2025-10-25'],
      datasets: [
        {
          label: "Ventas",
          data: [467, 576, 572, 79, 92, 574, 573, 576],
          backgroundColor: 'blue',
          borderColor: 'blue',
          fill: false
        },
        {
          label: "Ganancias",
          data: [542, 542, 536, 327, 17, 0, 538, 541],
          backgroundColor: 'limegreen',
          borderColor: 'limegreen',
          fill: false
        }
      ]
    },
    options: {
      aspectRatio: 2.5
    }
  });
}

La diferencia principal con el gráfico de barras es el uso de type: 'line' y las propiedades borderColor y fill. La propiedad borderColor define el color de las líneas, mientras que fill: false evita que el área bajo las líneas se rellene.

Inicialización del gráfico

Llama al método createChart en el método ngOnInit:

ngOnInit(): void {
  this.createChart();
}

Integración en la aplicación

Para mostrar el gráfico de líneas, modifica el archivo app.component.html para incluir el selector del componente de líneas. Si deseas mostrar ambos gráficos, puedes combinarlos:

<app-bar-chart></app-bar-chart> <app-line-chart></app-line-chart>

Guarda los cambios y verifica el resultado en el navegador. El gráfico de líneas mostrará las mismas ventas y ganancias, pero con líneas que conectan los puntos de datos, destacando las tendencias.

Personalización de gráficos

Chart.js ofrece numerosas opciones para personalizar los gráficos. Por ejemplo, puedes ajustar colores, agregar tooltips, o modificar las escalas de los ejes. A continuación, se muestra un ejemplo de cómo agregar tooltips y personalizar las etiquetas de los ejes en el gráfico de barras:

createChart() {
  this.chart = new Chart("MyChart", {
    type: 'bar',
    data: {
      labels: ['2025-10-18', '2025-10-19', '2025-10-20', '2025-10-21',
               '2025-10-22', '2025-10-23', '2025-10-24', '2025-10-25'],
      datasets: [
        {
          label: "Ventas",
          data: [467, 576, 572, 79, 92, 574, 573, 576],
          backgroundColor: 'rgba(54, 162, 235, 0.6)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
        },
        {
          label: "Ganancias",
          data: [542, 542, 536, 327, 17, 0, 538, 541],
          backgroundColor: 'rgba(50, 205, 50, 0.6)',
          borderColor: 'rgba(50, 205, 50, 1)',
          borderWidth: 1
        }
      ]
    },
    options: {
      aspectRatio: 2.5,
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Valores en USD'
          }
        },
        x: {
          title: {
            display: true,
            text: 'Fechas'
          }
        }
      },
      plugins: {
        tooltip: {
          enabled: true,
          mode: 'index',
          intersect: false
        }
      }
    }
  });
}

Este código agrega títulos a los ejes, asegura que el eje Y comience en cero y habilita tooltips que muestran los valores al pasar el cursor sobre las barras.

Usos prácticos de los gráficos

Los gráficos de barras son ideales para comparar valores discretos, como las ventas de diferentes productos o el rendimiento de varias sucursales. Por otro lado, los gráficos de líneas destacan al mostrar cambios continuos en el tiempo, como el crecimiento de usuarios en una aplicación o las fluctuaciones de precios. Al elegir entre estos tipos de gráficos, considera el tipo de datos y el mensaje que deseas transmitir. Por ejemplo:

  • Usa gráficos de barras para comparar categorías independientes.
  • Usa gráficos de líneas para mostrar tendencias o progresiones temporales.

Resolución de problemas comunes

Si el gráfico no se muestra, verifica lo siguiente:

  • Asegúrate de que Chart.js esté instalado correctamente ejecutando npm install chart.js.

  • Confirma que el id del elemento <canvas> coincida con el usado en el código TypeScript.

  • Revisa la consola del navegador para detectar errores de importación o configuración.

Si los datos no se actualizan correctamente, asegúrate de destruir el gráfico anterior antes de crear uno nuevo:

if (this.chart) {
    this.chart.destroy();
}
this.createChart();

Esto evita conflictos cuando los datos cambian dinámicamente.

Conclusiones

Crear gráficos con Chart.js en Angular es un proceso accesible y poderoso para visualizar datos en aplicaciones web. En este tutorial, aprendimos a configurar un proyecto Angular, instalar Chart.js, y crear gráficos de barras y líneas para representar datos de ventas y ganancias. Con la flexibilidad de Chart.js, puedes personalizar los gráficos para adaptarlos a las necesidades de tu proyecto, desde colores y estilos hasta interacciones avanzadas. Al dominar estas técnicas, podrás mejorar la experiencia del usuario y comunicar información de manera efectiva en tus aplicaciones. Experimenta con diferentes tipos de gráficos y configuraciones para descubrir todo el potencial de Chart.js en tus proyectos de desarrollo web.