ChartJS - gráficas

21-11-2022
Tiempo de lectura: 1 minutos

Crear gráficas de todo tipo para la visualización de datos con Charts es realmente fácil.

Instalación

Instalación

Empezamos pot instalar el código JavaScript. Tenemos los archivos disponibles en línea en CDNJS

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.min.js

O en jsDelivr

https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js

O bien, descargado de GitHub, como en este ejemplo

<script type="text/javascript" src="./js/chart.min.js">
</script>

Hay un helper que va muy bien para tener valores o sets de valores definidos, como veremos a continuación, solo hay que decargar el archivo siguiente:

<script type="text/javascript" src="./js/chart-utils.min.js">
</script>

Definir el gráfico

Ahora ya podemos configurar el tipo de gráfica que queremos utilizar. En este ejemplo será de tipo donut con colores para cada segmento. Primero establecemos el contenedor y lo identificamos con un ID

<canvas id='chart_1'></canvas>

JavaScript

Inicializamos el helper con las utilizadades, en caso que queramos hacer uso de este archivo y lo hayamos incluído previamente.

const Utils = ChartUtils.init();

Definimos los datos de la gráfica, aquí utilizamos la lista de colores predefinidos en Utils.CHART_COLORS, los cuales podemos cambiar.

const data_1 = {
labels: ['Etiqueta 1','Etiqueta 2','Etiqueta 3'],
datasets: [
        {
            label: 'Tres etiquetas',
            data: [9, 26, 3],
            backgroundColor: Object.values(Utils.CHART_COLORS),
        }
    ]
};

Configuramos la gráfica de tipo doughnut, le asignamos los datos a representar y establecemos algnas opciones; si es responsive a las acciones del mouse, especificamos dónde ha de aparecer la leyenda y el título

const config_1 = {
    type: 'doughnut',
    data: data_1,
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: 'Tres etiquetas'
            }
        }
    }
};

Finalmente ya podemos indicar que se cree una gráfica con los elementos definidos y aparecerá en el canvas correspondiente

Resultado del código explicado. Gràfico donut, animado y en colores.

const Chart_1 = new Chart(
    document.getElementById('chart_1'),
    config_1
);

Código

El código completo del ejemplo es este:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" 
src="../js/chart.min.js"></script>
        <script type="text/javascript" 
src="../js/chart-utils.min.js"></script>
    </head>
    <body>
	<div style='width: 500px'>
             <canvas id='chart_1'></canvas>
        </div>
        <script>
	const Utils = ChartUtils.init();

	const data_1 = {
	labels: ['Etiqueta 1','Etiqueta 2','Etiqueta 3'],
	datasets: [
		    {
			label: 'Tres etiquetas',
			data: [9, 26, 3],
			backgroundColor: 
                            Object.values(Utils.CHART_COLORS),
		    }
		]
	};
			
	const config_1 = {
		type: 'doughnut',
		data: data_1,
		options: {
			responsive: true,
			plugins: {
				legend: {
				    position: 'bottom',
				},
				title: {
				    display: true,
				    text: 'Tres etiquetas'
				}
			}
		}
	};
			
	const Chart_1 = new Chart(
		document.getElementById('chart_1'),
		config_1
	);	
    </script>
    </body>
</html>

Referencias

Documentación y web
https://www.chartjs.org
GitHub
https://github.com