Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM.

Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue.

Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm.

Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html

Instalando e importando chart.js

Primero instalamos el paquete de chart.js con:

npm install --save chart.js

Ahora en nuestro componente (y así en cualquier otro componente en donde vayamos a usar las gráficas) importamos todo de manera automática con:

import Chart from "chart.js/auto";

Canvas para la gráfica con Vue.js

Después en nuestro template del componente creamos un canvas con un id que debemos recordar para más tarde:

<canvas id="graficaDias" width="400" height="200"></canvas>

Fíjate que yo le he colocado el id de graficaDias. Ahora en el código de JavaScript simplemente creamos la gráfica con new Chart, pasándole el elemento recuperado con querySelector.

new Chart(document.querySelector("#graficaDias"), {
  type: "line",
  data: {
    labels: ["Etiqueta 1", "Etiqueta 2"],
    datasets: [
      {
        label: "Título del dataset",
        data: [100, 200],
        borderWidth: 1,
      },
    ],
  },
});

Gráfica dinámica

En caso de que vayas a cambiar los datos de las gráficas en un evento (clic del botón, cambio del select, etcétera) entonces te recomiendo guardar una referencia a la gráfica para poder reiniciarla más tarde.

Para ello, en el data del componente coloca una variable llamada grafica iniciada en null. Después de eso agrega el siguiente fragmento antes del código que inicia la gráfica:

if (this.grafica) {
  this.grafica.destroy();
}

Eso hará que, si la gráfica existe, se destruya como lo indiqué en otro post. Y finalmente cuando inicies la gráfica (con new Chart) asigna el resultado a this.grafica, por ejemplo:

this.grafica = new Chart(
  document.querySelector("#graficaDispositivosVecesRentados"),
  {
    type: "pie",
    data: {
      labels: reporte.map((dato) => dato.nombre),
      datasets: [
        {
          label: `Dispositivos con ocasiones rentadas`,
          data: reporte.map((dato) => dato.vecesRentado),
          backgroundColor: Utiles.coloresFondoGraficas,
        },
      ],
    },
  }
);

Entonces cada que ese fragmento de código se ejecute vas a comprobar si la gráfica existe. Si ya existe simplemente la vas a destruir, permitiendo que puedas volver a montar la gráfica en ese canvas.

Así es como podemos usar las gráficas de Chart.js en Vue.