Cómo añadir gráficos en tu web con Chart.js

0
19419

Índice de contenidos

    1. Entorno
    2. Introducción
    3. Primeros pasos
    4. Ejemplos
    5. Conclusión

1. Entorno

    • Hardware: Portátil MacBook Pro 15 pulgadas (2,5 GHz Intel Core i7, 16GB RAM)
    • Sistema Operativo: MacOS Monterey 12.4
    • Bootstrap 5
    • Chart.js v3.8.0

2. Introducción

Chart.js es una librería javascript open-source ideal para la visualización de datos en gráficos, como puede ser de barras, circular, líneas… donde destaca su sencillez. No requiere más que conocimientos básicos de Javascript y Html.

Ventajas
Las ventajas frente a otras librerías de visualización de gráficos:
    • Es opensource.
    • No requiere de ninguna dependencia ni librería externas, solo con javascript y html.
    • Se puede integrar de forma nativa con cualquier framework, como Angular, Vue, React…
    • Tiene una gran comunidad, soporte y buena documentación.
    • No requiere amplios conocimientos para su uso.

Importación o instalación

Hay diferentes formas de hacerlo según se ajuste a cada proyecto. La más simple es importando directamente el script en la plantilla html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>

Pero también es posible hacerlo mediante npm o descargando directamente desde Github incluyéndola localmente… Para más información siempre se puede consultar en la documentación oficial: Instalación

3. Primeros pasos

Se debe añadir un elemento canvas en nuestra plantilla html, con un id para poder acceder a él y pintar nuestro gráfico posteriormente.

<canvas id="graph"></canvas>

Necesitaremos un script para poder crear la gráfica con sus datos. Para crear este gráfico debemos recoger el canvas del html, crear el gráfico con su configuración y datos y asociarlo a este canvas:

var ctx = document.getElementById('graph');
var myChart = new Chart(ctx,{ 
    type: 'bar',
    data: data,
    options: {...}
});

Conceptos básicos:

    • type: tipo de gráfico, puede ser bar, pie…
    • data: datos del gráfico, puntos, colores, etiquetas…
      • labels: etiquetas que aperecen en la parte inferior del gráfico
      • datasets: conjunto de datos que se mostrarán en el gráfico, pueden ser más de
        uno y formar un array siempre que tengan la misma estructura y mismo número de datos.

        • data: es una lista y contienen los valores de los datos a mostrar
        • datasets: conjunto de datos que se mostrarán en el grafico, pueden ser
          más de uno y formar un array siempre que tengan la misma estructura y mismo número de
          datos.
        • backgroundColor: color del fondo, puede ser una lista para mostrar diferentes colores, por ejemplo en cada barra o compartir un único color.
        • Hay más configuraciones como borderColor, borderWidth….
    • options: depende del tipo de grafico que usemos se pueden usar ciertas opciones para un mayor control. Por ejemplo:
        • Para forzar que el eje Y empiece en valor 0:
      options: {
          scales:{ 
              yAxes:[{ 
                  ticks: { 
                      beginAtZero:true 
                  } 
              }] 
          } 
      }

4. Ejemplos

Después de explicar un poco la estructura y conceptos básicos vamos a ver tres ejemplos con tres gráficos diferentes:

Ejemplo Gráfico de barras

Lo primero es añadir el elemento canvas al archivo html. En el archivo js establecemos las etiquetas y datos a mostrar en el gráfico, y podemos indicar algunas opciones más como por ejemplo el color de cada barra.
En la variable config definimos el tipo de gráfico, en este caso type:bar, y creamos una nueva instancia de Chart con el elemento canvas del html y las configuraciones para ese gráfico.
const labels = ['Enero', 'Febrero', 'Marzo', 'Abril']

const graph = document.querySelector("#grafica");

const data = {
    labels: labels,
    datasets: [{
        label:"Ejemplo 1",
        data: [1, 2, 3, 4],
        backgroundColor: 'rgba(9, 129, 176, 0.2)'
    }]
};

const config = {
    type: 'bar',
    data: data,
};

new Chart(graph, config);

Puedes ver la demostración y código completo aquí: Ejemplo gráfico de barras

Ejemplo Gráfico circular

El gráfico circular o de quesitos es muy parecido al de barras, podríamos utilizar prácticamente el mismo código cambiando el tipo de gráfico. Pero en este caso vamos a definir un color para cada sección del gráfico para una mejor identificación de los datos.

const labels = ['Enero', 'Febrero', 'Marzo', 'Abril']
const colors = ['rgb(69,177,223)', 'rgb(99,201,122)', 'rgb(203,82,82)', 'rgb(229,224,88)'];

const graph = document.querySelector("#grafica");

const data = {
    labels: labels,
    datasets: [{
        data: [1, 2, 3, 4],
        backgroundColor: colors
    }]
};

const config = {
    type: 'pie',
    data: data,
};

new Chart(graph, config);

Puedes ver la demostración y código completo aquí: Ejemplo gráfico circular

Ejemplo Gráfico de líneas con varios conjuntos de datos

Se puede tener mas un conjunto de datos en el mismo gráfico y poder comparar todos los datos de una vez. El código es tambien muy sencillo solo debemos añadir en la parte de dataset los datos para cada conjunto de datos que queramos con las configuraciones que deseemos, por ejemplo el color, grosor de las lineas, etiqueta…

const labels = ['Enero', 'Febrero', 'Marzo', 'Abril']

const dataset1 = {
    label: "Dataset 1",
    data: [10, 55, 60, 120],
    borderColor: 'rgba(248, 37, 37, 0.8)',
    fill: false,
    tension: 0.1
};

const dataset2 = {
    label: "Dataset 2",
    data: [5, 44, 55, 100],
    borderColor: 'rgba(69, 248, 84, 0.8)',
    fill: false,
    tension: 0.1
};

const dataset3 = {
    label: "Dataset 3",
    data: [20, 40, 55, 120],
    borderColor: 'rgba(69, 140, 248, 0.8)',
    fill: false,
    tension: 0.1
};

const dataset4 = {
    label: "Dataset 4",
    data: [18, 40, 20, 100],
    borderColor: 'rgba(245, 40, 145, 0.8)',
    fill: false,
    tension: 0.1
};

const graph = document.querySelector("#grafica");

const data = {
    labels: labels,
    datasets: [dataset1,dataset2,dataset3,dataset4]
};

const config = {
    type: 'line',
    data: data,
};

new Chart(graph, config);

Puedes ver la demostración y código completo aquí: Ejemplo gráfico líneas

Más ejemplos

Para ver la demostración de todos los gráficos y el código completo de todos los ejemplos anteriores e incluso alguno más en Github o en https://laura-cercas.github.io/chartjs-tutorial/

También siempre se puede acudir a la documentación oficial donde se explica y muestra más tipos de gráficos y más opciones disponibles: Chart.js ejemplos

5. Conclusión

Como hemos podido ver, Chart.js es una librería muy sencilla y que visualmente da un aspecto bastante moderno a la representación de datos en diferentes gráficas, incluso con pequeñas animaciones.

Es apta para usuarios con menos experiencias, ya que únicamente requiere conocimientos básicos de html y javascript. Como todo, es posible darle una implementación más compleja haciendo uso de otras opciones y características que permite la propia librería para dar una personalización avanzada a las gráficas.

En próximos tutoriales indagaré más en otras opciones que nos ofrece esta librería.

 

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad