Angular: 60. Gráficas de estadísticas con Chartjs: Instalación

Vamos a ver cómo podemos pintar gráficas de estadísticas en Angular.
Chartjs es una librería JavaScript que nos permite crear una gran variedad de gráficas de estadísticas. Además, es muy fácilmente utilizable con Angular.

Esta vez vamos a utilizar un proyecto ya creado para ahorrar tiempo. Recomiendo mirar los primeros posts de Angular para ver cómo crear un proyecto desde cero.

Lo primero que podemos hacer es echar un vistazo a la web de principal de "https://www.chartjs.org/", donde podemos encontrar ejemplos de todo lo que vamos a poder hacer con la librería.
Lo segundo es visitar la página de NG2-Charts: "https://valor-software.com/ng2-charts/", que es donde se encuentran las instrucciones para poder utilizar Chartjs con Angular, y desde donde vamos a partir.

En la web de NG2-Charts lo primero que aparece son las instrucciones de instalación, que nos pide ejecutar los siguientes dos comandos:

Los ejecutamos por la consola de comandos, teniendo en cuenta que hay que ejecutarlos estando posicionados en la carpeta de nuestro proyecto.

Una vez instalados tanto el Chart.js como el ng2-charts, lo siguiente que nos piden es modificar el fichero "app.module.ts" de nuestro proyecto para añadir una importación:

Así que lo modificamos como nos solicitan:

Con esto ya tendríamos todo lo necesario para empezar a trabajar con las gráficas.
Creamos un componente nuevo en nuestra aplicación con el nombre que queramos:

Y lo mapeamos en el fichero de rutas para poder acceder al componente desde el navegador:

Ahora simplemente tocaría levantar el servidor y probar que podemos acceder al componente sin problemas. Sin embargo, cuando intenté levantar la aplicación, me apareció éste error en la consola de comandos:

Que mostraba este error en la consola del navegador:

Por lo visto, después de investigar, parece que el problema es una incompatibilidad entre mi versión de Angular y mi versión de ng2-charts, así que instalé una versión un poco más antigua de ng2-charts ejecutando el siguiente comando en la consola de comandos, desde la carpeta de la aplicación: "npm install ng2-charts@2.2.3 --save". Como se puede ver, es el mismo comando de instalación que ejecutamos antes, solo que aquí le estoy indicando la versión concreta que quiero que se instale.

Ahora sí, arranco la aplicación sin problemas y puedo acceder al componente nuevo:

Y con esto ya tendríamos terminada la instalación. En las siguientes entradas veremos cómo crear varios gráficos de diferente tipo.