Introducción

Ayer estuve trabajando con Chart.js, una librería para generar gráficas. Debido a que la gráfica era actualizada cada que el usuario seleccionaba una opción distinta, a veces se mostraban algunas barras encima de otras, tooltips que no deberían estar y cosas de esas.

Así que investigando encontré la solución para reiniciar, limpiar y destruir una gráfica en Chart.js. En otras palabras, estaremos reiniciando la gráfica.

Nota: puedes ver un tutorial de cómo trabajar con gráficas en AngularJS aquí.

Reiniciar gráfica de Chart.js

Ponemos una variable global que albergará nuestra gráfica:

var ctx = document.getElementById('canvas').getContext('2d');
window.grafica = new Chart(ctx, {/* Opciones aquí */});

Y cada que la vayamos a actualizar, hacemos esta comprobación:

if (window.grafica) {
	window.grafica.clear();
	window.grafica.destroy();
}

Con el if comprobamos si existe nuestra variable. En caso de que exista, la limpiamos y destruimos.

Así, estamos reiniciando nuestra gráfica. De modo que el código completo podría quedar así:

var ctx = document.getElementById('canvas').getContext('2d');
if (window.grafica) {
	window.grafica.clear();
	window.grafica.destroy();
}
window.grafica = new Chart(ctx, {/* Opciones aquí */});

De esta manera, antes de asignar a la variable, limpiamos la gráfica si ya existe.

Si el post ha sido de tu agrado te invito a que me sigas para saber cuando haya escrito un nuevo post, haya actualizado algún sistema o publicado un nuevo software. Facebook | X | Instagram | Telegram | También estoy a tus órdenes para cualquier contratación en mi página de contacto