Chart.js en Ionic

Buenas, hoy les muestro cómo instalar y utilizar Chart.js para sus proyectos en Ionic, tanto para Cordova como Capacitor.

Por si desean ver esto en formato video, se los dejo aquí. Sino debajo del video tienen todos los pasos.

En primer lugar debemos instalar la librería. Para ello, en la carpeta de nuestro proyecto, abrimos una consola y ejecutamos lo siguiente:

npm i chart.js --save 

Esto instalará la librería. Luego, nos dirigimos a la página o al componente en donde deseamos mostrar los gráficos. En el archivo .ts, importamos la librería. Al no utilizar @types, el import será de la siguiente forma:

import * as Chart from 'chart.js';

Luego, en la página HTML, agregamos un elemento canvas. Si optamos por hacerlo responsive, debe estar adentro de un div, y cuando lo inicialicemos deberemos asegurarnos de pasar como option responsive: true.

<div class='canvas-responsive'>

<canvas id='mi-chart'></canvas>

</div>

Al estilo scss (o css) del componente, agregamos lo siguiente:

.chart-container {

  position: relative;

  margin: auto;

  height: 80vh;

  width: 80vw;

}

Finalmente, utilizamos el objeto Chart para poder generar nuestro gráfico. Recomiendo generar dicho gráfico en la función ngOnInit.

private myChart: Chart;

ngOnInit() {

const ctx = document.getElementById('my-chart');

this.myChart = new Chart(ctx, {

type: 'pie',

labels: ['referencia 1', 'referencia 2', 'referencia 3'],

datasets: [{data: [10, 20, 30]}] 

});

} 

Eso fue todo, espero que les haya sido útil.

Saludos!