Instalación de ChartJS en un proyecto Angular
En este post vamos a ir repasando los pasos necesarios para instalar ChartJS en nuestro proyecto Angular. Por si no lo sabéis, ChartJS es una biblioteca de herramientas JavaScript que nos permite incluir visualizaciones de datos mediante gráficos en nuestras aplicaciones web. La mayoría de nosotros estamos acostumbrados a desarrollar páginas con multitud de datos, pero normalmente no nos planteamos la posibilidad de trasladar esos datos a elementos visuales. Con ChartJS cambia nuestra perspectiva, pues se trata de una herramienta que nos va a permitir mostrar gráficos atractivos sin tener que invertir demasiado tiempo en realizar desarrollos complejos.
Biblioteca de herramientas ChartJS
Para que os hagáis una idea rápida acerca de la funcionalidad de esta herramienta, os haré un resumen de las características más destacadas de ChartJS. Serían las siguientes:
Facilidad de uso: se trata de una herramienta relativamente fácil de usar y es ideal para los desarrolladores que desean implementar gráficos rápidamente sin mucha complejidad.
Personalización: Aunque es fácil de usar de manera básica, también ofrece opciones avanzadas de personalización para aquellos que desean ajustar los detalles de su gráfico.
Interactividad: Soporta interactividad, como tooltips y eventos, que pueden mejorar la experiencia del usuario al explorar datos en un gráfico.
Adaptabilidad: Los gráficos creados con esta herramienta se pueden considerar responsive y, por tanto, se adaptarán a diferentes tamaños de pantalla.
Compatibilidad: Es compatible con todos los navegadores modernos y se integra fácilmente con frameworks web como Angular, React y Vue.js.
 |
| Ejemplo de gráfico creado con ChartJS |
Teniendo en cuenta las características anteriores, los tipos de gráficos más destacados que se pueden crear con ChartJS son los siguientes:
Area Chart
Bar Chart
Bubble Chart
Doughnut Chart / Pie Chart
Line Chart
Mixed Chart
Polar Area Chart
Radar Chart
Scatter Chart
No vamos a entrar más en detalle en este post, pero si queréis conocer el producto más en profundidad, podéis dirigiros a su página oficial.
Instalación de ChartJS en un proyecto Angular
A continuación, vamos ir viendo los pasos necesarios para instalar ChartJS en nuestro proyecto Angular. Concretamente, vamos a utilizar la versión Angular 17, así que tenedlo en cuenta por si estáis trabajando con una versión posterior.
1º) En primer lugar, debemos proceder a instar el módulo CDK de Angular. Para ello, podemos por ejemplo lanzar la instalación de Angular Material.
ng add @angular/material
Una vez finalizada la descarga de Angular Material, las dependencias de nuestro package.json deberían quedar algo así:
Como se aprecia, ha quedado incluido el módulo "@angular/cdk" (en este ejemplo, se ha descargado concretamente la versión 17.1.0).
2º) A continuación, procedemos a instalar las librerías chart.js con el comando:
npm install chart.js
Se procederá a descargar toda la información precisada.
added 2 packages, and audited 967 packages in 5s
119 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Una vez finalizada la descarga, las dependencias quedarán del siguiente modo:
Como se aprecia, ha quedado incluida la dependencia "chart.js" (versión 4.4.1).
3º) Ahora debemos proceder a instalar la librería ng2-charts. Esto lo podemos hacer de dos formas, desde Angular con el siguiente comando:
ng add ng2-charts
O también podemos instalarla desde npm con el siguiente comando:
npm install ng2-charts --save
Se procederá a descargar toda la información precisada.
ℹ Using package manager: npm
✔ Found compatible package version: ng2-charts@5.0.4.
✔ Package information loaded.
The package ng2-charts@5.0.4 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
UPDATE package.json (1167 bytes)
✔ Packages installed successfully.
Bootstrap call not found
Una vez finalizada la descarga, las dependencias quedarán del siguiente modo:
Como se aprecia, ha quedado incluida la dependencia "ng2-charts" (versión 5.0.4).
Con estos sencillos pasos, el módulo "ng2-charts" quedará incorporado a la carpeta node_modules de nuestro proyecto Angular. A partir de aquí, ya podríamos comenzar a utilizar los diferentes tipos de gráficos en la parte visual de nuestra aplicación web.
Si lanzamos nuestro proyecto, la aplicación debería construirse sin ningún error de compilación. El log debería similar al siguiente.
Initial Chunk Files | Names | Raw Size
styles.css | styles | 86.99 kB |
polyfills.js | polyfills | 83.46 kB |
main.js | main | 22.19 kB |
| Initial Total | 192.64 kB
Application bundle generation complete. [3.331 seconds]
Watch mode enabled. Watching for file changes...
Re-optimizing dependencies because lockfile has changed
➜ Local: http://localhost:4200/
➜ press h + enter to show help
Por supuesto, todavía nos quedaría proceder a incorporar los gráficos en cada una de las páginas webs que lo requieran. Este proceso requiere una codificación muy sencilla, pero la explicación detallada de la misma ya la dejaremos para un nuevo post. Por ahora, lo dejamos aquí. Si tenéis cualquier problema con la instalación, no dudéis a la hora de dejar vuestras dudas aquí abajo.
Saludos.
Comentarios
Publicar un comentario