En este artículo aprenderás:

1. Introducción a Chartjs
2. Crear gráficas de línea
3. Crear un componente reutilizable de gráfica de línea
4. Usar el componente reutilizable

Introducción a Chartjs

"Entre muchas bibliotecas de gráficos para desarrolladores de aplicaciones de JavaScript, Chart.js es actualmente la más popular. Viene con tipos de TypeScript incorporados y es compatible con todos los marcos de JavaScript populares, incluidos React, Vue, Svelte y Angular. Puede usar Chart.js directamente o aprovechar paquetes de contenedor bien mantenidos que permiten una integración más nativa con los marcos de su elección." (Fuente)

Crear gráficas de línea básicas

* Para nuestro ejemplo vamos a utilizar Vue 3

<script setup lang="ts">
  import { LineChart, useLineChart } from "vue-chart-3";
  import { Chart, registerables } from "chart.js";

  Chart.register(...registerables);

  const data = {
    labels: [
      "Enero",
      "Febrero",
      "Marzo",
      "Abril",
      "Mayo",
      "Junio",
      "Julio",
      "Agosto",
      "Septiembre",
      "Octubre",
      "Noviembre",
      "Diciembre",
    ],
    datasets: [
      {
        label: "Ventas (Millones de dólares)",
        data: [12, 19, 3, 5, 2, 3, 10, 12, 19, 3, 5, 2],
        borderColor: "black",
      },
    ],
  };

  const options = {
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
      title: {
        display: true,
        text: "Gráficas con Vue!",
      },
    },
    elements: {
      line: {
        tension: 0.2, // Curva de la línea
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: (context: any) => {
            if (context.tick.value === 0) {
              return "black"; // línea en el eje Y con valor 0
            } else {
              return "transparent"; // las demás líneas en eje Y
            }
          },
        },
      },
      x: {
        grid: {
          color: (context: any) => {
            if (context.tick.value === 0) {
              return "black"; // línea en el eje X con valor 0
            } else {
              return "transparent"; // las demás líneas en eje X
            }
          },
        },
      },
    },
  };

  const { lineChartProps } = useLineChart({
    chartData: data,
    options,
  });
</script>

<template>
  <LineChart v-bind="lineChartProps" />
</template>

Crear un componente reutilizable de gráfica de línea

* Para nuestro ejemplo vamos a utilizar Vue 3

Si en tu aplicación vas a utilizar más de una gráfica, es recomendable crear un componente reutilizable para que no tengas que repetir el código. Con este componente serás capaz de crear gráficas en toda tu aplicación con tan solo un par de líneas de código.

<!-- Componente reutilizable -->
<script lang="ts" setup>
  import { LineChart, useLineChart } from "vue-chart-3";
  import { Chart, registerables } from "chart.js";

  Chart.register(...registerables);

  const props = defineProps<{
    dataX: number | string[];
    dataY: number[][]; // Utilizamos un arreglo de arreglos para poder tener más de una linea en la gráfica
    labels: string[];
    lineColors: string[];
    title?: string;
  }>();

  const data = {
    datasets: props.dataY?.map((dataArray, datasetIndex) => {
      const data = dataArray?.map((value, index) => ({
        y: value,
        x: (props.dataX as any)[index],
      }));

      return {
        data,
        label: props.labels[datasetIndex],
        backgroundColor: props.lineColors[datasetIndex],
        borderColor: props.lineColors[datasetIndex],
      };
    }),
  };

  const options = {
    plugins: {
      legend: {
        display: props.labels ? true : false,
        position: "top",
      },
      title: {
        display: props.title ? true : false,
        text: props.title,
      },
    },
    elements: {
      line: {
        tension: 0.2,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: (context: any) => {
            if (context.tick.value === 0) {
              return "black"; // linea en el eje Y con valor 0
            } else {
              return "transparent"; // las demás lineas en eje Y
            }
          },
        },
      },
      x: {
        grid: {
          color: (context: any) => {
            if (context.tick.value === 0) {
              return "black"; // linea en el eje X con valor 0
            } else {
              return "transparent"; // las demás lineas en eje X
            }
          },
        },
      },
    },
  };

  const { lineChartProps } = useLineChart({
    chartData: data,
    options,
  });
</script>

<template>
  <LineChart v-bind="lineChartProps" />
</template>

Usar el componente reutilizable

<!-- Utilizar el componente en tu aplicación -->
<script setup lang="ts">
  import LinechartReusable from "@/components/LinechartReusable.vue";

  const dataX = [
    "Enero",
    "Febrero",
    "Marzo",
    "Abril",
    "Mayo",
    "Junio",
    "Julio",
    "Agosto",
    "Septiembre",
    "Octubre",
    "Noviembre",
    "Diciembre",
  ];

  const dataY = [
    [12, 19, 3, 5, 2, 3, 10, 12, 19, 3, 5, 2], // Ventas
    [6, 3, 3, 4, 1, 2, 8, 3, 12, 3, 2, 0], // Ganancias
  ];
</script>
<template>
  <LinechartReusable
    :data-x="dataX"
    :data-y="dataY"
    :labels="[
      'Ventas (Millones de dólares)',
      'Ganancias (Millones de dólares)',
    ]"
    :line-colors="['black', 'orange']"
    title="Gráficas con Vue!"
  />
</template>