Chart.js – Tutorial con ejemplos para gráficas en la web

Gráfica de línea con varios dataset usando chart.js - Tutorial con ejemplos

En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.

Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.

Importando chart.js

Primero debemos importar el script de chart.js a nuestro proyecto. Hay varias maneras usando NPM, etcétera. Yo te mostraré la forma más simple. Coloca un script que cargue la siguiente URL:

https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js

Así:

<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script>

Igualmente puedes ver la guía oficial.

Explicación de conceptos

Antes de pasar al código te mostraré los conceptos básicos de lo que es cada cosa, con mis propias palabras.

Labels: son las etiquetas de nuestros datos. Por cada valor, debe haber una etiqueta. Es decir, si nuestro arreglo de labels es de 4 elementos, nuestro arreglo de datos debe ser de 4 elementos.
Dataset: es un conjunto de datos. Dentro de este conjunto agregamos la data o datos, que son un arreglo de números.
Datasets: esta librería acepta varios datasets en una gráfica. Ya te expliqué anteriormente lo que es un dataset.

Para simplificar, si queremos mostrar las ventas de un año por mes, tomando solo los primeros cuatro meses (enero, febrero, marzo y abril) nuestras labels serían:

const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];

Y tendríamos el siguiente dataset en donde además de la data, especificamos el color y otros aspectos:

const datosVentas2020 = {
    label: "Ventas por mes",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};

Fíjate también en que cada dataset tiene una etiqueta para diferenciar los datos. Si más tarde agregamos otro dataset, probablemente sería “Ventas por mes del 2021” y así se podrían diferenciar.

En este tutorial de chart.js te mostraré ejemplos de gráficas de barras (bar), línea (line) y pie. También te enseñaré a trabajar con más de un dataset y a modificar la medida con CSS.

Por cierto, todas las gráficas viven dentro de un canvas. Así que vamos a definir un elemento canvas en nuestro HTML para luego pasarle ese elemento DOM (recuperado con querySelector) al método Chart.

Nuestra primera gráfica con chart.js – tutorial

Gráfica de líneas – Tutorial de chart.js con ejemplos

Comencemos viendo una gráfica de líneas. Primero tenemos el diseño HTML, este diseño puede ser una página web completa o la más básica, lo que importa es tener un elemento canvas.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficas con chart.js | By Parzibyte</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Ejemplo 1 - Gráfica de líneas</h1>
    <a href="https://parzibyte.me/blog">By Parzibyte</a>
    <a href="../index.html">| Ir al inicio</a>
    <canvas id="grafica"></canvas>
    <script src="script.js"></script>
</body>

</html>

Estoy importando la librería en la línea 8, definiendo el canvas en la línea 15 e importando el script que creará la gráfica en la línea 16. Ahora pasemos a ver el script:

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las que van en el eje X. 
const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"]
// Podemos tener varios conjuntos de datos. Comencemos con uno
const datosVentas2020 = {
    label: "Ventas por mes",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};
new Chart($grafica, {
    type: 'line',// Tipo de gráfica
    data: {
        labels: etiquetas,
        datasets: [
            datosVentas2020,
            // Aquí más datos...
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
        },
    }
});

Todo comienza definiendo el elemento del DOM en donde vamos a dibujar la gráfica creada con chart.js, después definimos las etiquetas y el conjunto de datos o dataset. Los comentarios explican lo que hace cada cosa.

Después creamos una nueva instancia de Chart pasándole dos cosas: el elemento del DOM en donde se va a dibujar la gráfica, y las características de la misma. El resultado es el que se observa en la imagen que acompaña al título.

Por cierto, las opciones de begintAtZero son para que el eje de Y a la izquierda comience en 0, y no en el valor más bajo del conjunto de datos. A mí me gusta ese estilo, si quieres puedes cambiarlo o borrar ese ajuste.

Puedes ver la demostración aquí.

Gráfica de barras

Crear gráfica de barras con chart.js

La gráfica de líneas y de barras son muy parecidas, de hecho podemos usar el mismo código y solo cambiar el tipo de gráfica. El código entonces quedaría así:

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las que van en el eje X. 
const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"]
// Podemos tener varios conjuntos de datos. Comencemos con uno
const datosVentas2020 = {
    label: "Ventas por mes",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};
new Chart($grafica, {
    type: 'bar',// Tipo de gráfica
    data: {
        labels: etiquetas,
        datasets: [
            datosVentas2020,
            // Aquí más datos...
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
        },
    }
});

Lo único que está cambiando es el tipo de line a bar, en la línea 14. La demostración está aquí.

Usando dos conjuntos de datos

Gráfica comparativa con dos conjuntos de datos usando chart.js

Como te mencioné anteriormente, se puede tener más de un conjunto de datos. En este caso los usos son varios, pero uno de ellos puede ser comparar dos datasets, por ejemplo, las ventas de dos años. Veamos el ejemplo entonces:

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las que van en el eje X. 
const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"]
// Podemos tener varios conjuntos de datos
const datosVentas2020 = {
    label: "Ventas por mes - 2020",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};
const datosVentas2021 = {
    label: "Ventas por mes - 2021",
    data: [10000, 1700, 5000, 5989], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(255, 159, 64, 0.2)',// Color de fondo
    borderColor: 'rgba(255, 159, 64, 1)',// Color del borde
    borderWidth: 1,// Ancho del borde
};

new Chart($grafica, {
    type: 'line',// Tipo de gráfica
    data: {
        labels: etiquetas,
        datasets: [
            datosVentas2020,
            datosVentas2021,
            // Aquí más datos...
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
        },
    }
});

Fíjate en que hay dos datasets y cada uno de ellos difiere en los datos, etiqueta y color. Pero la cantidad de datos siempre coincide con las etiquetas de la gráfica. Podemos agregar infinitos datasets. La demostración la puedes ver aquí.

Doble conjunto de datos pero con gráfica de barras

Tutorial de chart.js – Ejemplo para gráfica de barras con dos conjuntos de datos

Entre la gráfica de barras y de línea, a nivel de programación y uso con chart.js, no hay mucha diferencia.

El ejemplo anterior puede ser usado para esta demostración simplemente cambiando el tipo de gráfica, y los dos conjuntos de datos se van a mostrar a su manera.

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las que van en el eje X. 
const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"]
// Podemos tener varios conjuntos de datos
const datosVentas2020 = {
    label: "Ventas por mes - 2020",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};
const datosVentas2021 = {
    label: "Ventas por mes - 2021",
    data: [10000, 1700, 5000, 5989], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(255, 159, 64, 0.2)',// Color de fondo
    borderColor: 'rgba(255, 159, 64, 1)',// Color del borde
    borderWidth: 1,// Ancho del borde
};

new Chart($grafica, {
    type: 'bar',// Tipo de gráfica
    data: {
        labels: etiquetas,
        datasets: [
            datosVentas2020,
            datosVentas2021,
            // Aquí más datos...
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
        },
    }
});

Lo que cambia ahora es que la comparativa se hace por cada label, y no en general como en el caso de la gráfica de tipo line. La demostración está aquí.

Usando más conjuntos de datos con chart.js

Gráfica de línea con varios dataset usando chart.js – Tutorial con ejemplos

En caso de que dos datasets no hayan sido suficientes, aquí te dejo otro ejemplo en donde comparamos muchos más datasets.

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las que van en el eje X. 
const etiquetas = ["Enero", "Febrero", "Marzo", "Abril"]
// Podemos tener varios conjuntos de datos

const datosVentas2018 = {
    label: "Ventas por mes - 2018",
    data: [500, 900, 134, 2000], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(211,93,110, 0.2)',// Color de fondo
    borderColor: 'rgba(211,93,110, 1)',// Color del borde
    borderWidth: 1,// Ancho del borde
};
const datosVentas2019 = {
    label: "Ventas por mes - 2019",
    data: [700, 700, 4500, 2500], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(209,234,163,0.5)',// Color de fondo
    borderColor: 'rgba(209,234,163,1)',// Color del borde
    borderWidth: 1,// Ancho del borde
};
const datosVentas2020 = {
    label: "Ventas por mes - 2020",
    data: [5000, 1500, 8000, 5102], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
    borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
    borderWidth: 1,// Ancho del borde
};
const datosVentas2021 = {
    label: "Ventas por mes - 2021",
    data: [10000, 1700, 5000, 5989], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    backgroundColor: 'rgba(255, 159, 64, 0.2)',// Color de fondo
    borderColor: 'rgba(255, 159, 64, 1)',// Color del borde
    borderWidth: 1,// Ancho del borde
};

new Chart($grafica, {
    type: 'line',// Tipo de gráfica
    data: {
        labels: etiquetas,
        datasets: [
            datosVentas2018,
            datosVentas2019,
            datosVentas2020,
            datosVentas2021,
            // Aquí más datos...
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
        },
    }
});

En este caso es de tipo line, pero podría ser de tipo bar sin problemas. De este modo puedes agregar infinitos conjuntos de datos siempre y cuando sean visibles y agradables a la vista del usuario.

La demostración la encuentras aquí.

Gráfica circular

Gráfico circular usando chart.js – Ejemplo de gráfica

Hasta ahora te he mostrado cómo crear gráficas de línea y de barras usando chart.js, es momento de ver las gráficas de pastel, de tarta, circulares, de 360 grados o como las llames.

Para este tipo de gráficos se usa casi lo mismo, pero ahora las etiquetas van a ser una porción del gráfico circular, y los conjuntos de datos no van a llevar etiqueta.

Existen dos variantes para esta gráfica, la de pie que es la de pastel y la dougnhut que sería la gráfica de dona, puedes cambiarlo si quieres.

// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Las etiquetas son las porciones de la gráfica
const etiquetas = ["Ventas", "Donaciones", "Trabajos", "Publicidad"]
// Podemos tener varios conjuntos de datos. Comencemos con uno
const datosIngresos = {
    data: [1500, 400, 2000, 7000], // La data es un arreglo que debe tener la misma cantidad de valores que la cantidad de etiquetas
    // Ahora debería haber tantos background colors como datos, es decir, para este ejemplo, 4
    backgroundColor: [
        'rgba(163,221,203,0.2)',
        'rgba(232,233,161,0.2)',
        'rgba(230,181,102,0.2)',
        'rgba(229,112,126,0.2)',
    ],// Color de fondo
    borderColor: [
        'rgba(163,221,203,1)',
        'rgba(232,233,161,1)',
        'rgba(230,181,102,1)',
        'rgba(229,112,126,1)',
    ],// Color del borde
    borderWidth: 1,// Ancho del borde
};
new Chart($grafica, {
    type: 'pie',// Tipo de gráfica. Puede ser dougnhut o pie
    data: {
        labels: etiquetas,
        datasets: [
            datosIngresos,
            // Aquí más datos...
        ]
    },
});

Por cierto, ahora ya no usamos un solo color, sino un arreglo de colores en donde cada uno de ellos corresponde a una porción de la gráfica.

Puedes ver la demostración en este enlace.

Cambiando tamaño del canvas con chart.js

Cambiar tamaño de gráfica

El canvas en donde se dibuja la gráfica puede ser personalizado en cuanto a su tamaño. Acepta todos los estilos que el elemento, así que por ejemplo podríamos cambiar el ancho máximo de una gráfica usando CSS.

Entonces tenemos un elemento de canvas en nuestro HTML, importamos el estilo CSS:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficas con chart.js | By Parzibyte</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Ejemplo 7 - Gráfica con estilos</h1>
    <a href="https://parzibyte.me/blog">By Parzibyte</a>
    <a href="../index.html">| Ir al inicio</a>
    <canvas id="grafica"></canvas>
    <script src="script.js"></script>
</body>

</html>

Después simplemente definimos un estilo, en este caso estoy indicando el max-width:

#grafica{
    max-width: 500px;
}

Y de ese modo cambiamos el ancho de la gráfica. Aquí puedes ver los resultados.

Conclusión

Esta maravillosa librería permite crear bastantes modelos de gráficas en la web usando JavaScript. Lo que expliqué aquí apenas demuestra un poco del potencial de esta librería; si quieres adentrarte más puedes leer la documentación oficial.

En mi blog tengo otras entradas relacionadas, por ejemplo, si quieres refrescar la gráfica, primero debes limpiarla. También la he implementado en varios proyectos como:

Espero traer más tutoriales sobre esta librería en el futuro. Se me ocurre mostrar cómo hacerlo desde PHP usando AJAX o imprimiendo los datos directamente desde el servidor.

Mientras tanto te dejo con el código completo de los ejemplos, todas las demostraciones y más tutoriales de JavaScript.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente Crear gráfica con PHP y Chart.js »

Anterior « C - Raíz cuadrada sin sqrt: Método de Newton

Ver comentarios

Alejo dice:

septiembre 2, 2024 en 9:53 am

Gracias, me sirvió para entender - 2024 - agosto 2
César Vilela dice:

enero 31, 2024 en 11:07 am

gracias por tu publicación, me parece que es clara, sería genial que colocaras dos o tres gráficas al mismo tiempo.