Índice de contenidos
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
-
- 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
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.
