Reiniciar o limpiar gráfica de Chart.js

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.

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 Filtrar arreglos en Javascript como si se utilizara LIKE de SQL »

Anterior « Acceder a los filtros de VueJS desde el código Javascript

Ver comentarios

AntonioCV dice:

octubre 31, 2024 en 8:16 am

Excelente, me sirvió mucho estaba atorado con esto desde hace unos días y no podía solucionarlo, mil gracias
alberto dice:

agosto 29, 2023 en 1:20 pm

Muchas gracias me funciono justo estaba atorado con eso, gracias
wilmer chacon dice:

julio 31, 2022 en 8:35 pm

Buenas amigo saludos tengo un problema con un grafico si me muestra las actualizaciones pero me sale la primera grafica siempre, como si no eliminara la primera grafica
- parzibyte dice:
  
  julio 31, 2022 en 9:52 pm
  
  Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software con gusto lo atiendo en https://parzibyte.me/#contacto
  Saludos!
Josué Argueta dice:

septiembre 27, 2019 en 10:48 am

muchas gracias crack me funciono a la perfeccion, estoy trabajando con graficos dinamicos por rengo de fechas y me funciono a la perfeccion
- parzibyte dice:
  
  septiembre 27, 2019 en 10:50 am
  
  Es un placer ayudar :)
  Te invito a seguirme en mis redes sociales y a suscribirte a mi canal de YouTube
  Saludos
Eli dice:

julio 15, 2019 en 11:02 am

Hola, apliqué esta misma forma, pero tengo varias gráficas en la misma vista y cuando pongo esa declaración en cada una de las gráficas, ya no se muestran y cuando se la dejo a una sola, funciona bien para esa misma, pero para las demás ya no, ¿habrá alguna forma de poder limpiar las otras sin que afecte a las demás? Gracias, de ante mano.
- parzibyte dice:
  
  julio 16, 2019 en 4:18 pm
  
  Hola, ¿cómo estás obteniendo la gráfica? y, ¿en dónde la estás guardando? en este ejemplo solo hay una gráfica, así que se guarda en window, pero en el caso de muchas, la variable se debería guardar en otro lugar o en otras variables. Si pones el código y un ejemplo que pueda reproducir sería mucho mejor
  Saludos
Alexander Guandique dice:

febrero 14, 2019 en 10:50 pm

Era justo lo que necesitaba gracias me sirvió perfectamente
Alexis Montilla dice:

agosto 5, 2018 en 9:18 pm

Perfecto!!!!
Lo que estaba buscando...
- parzibyte dice:
  
  agosto 5, 2018 en 9:44 pm
  
  Me da gusto que te haya funcionado. Te invito a que te suscribas a mi blog ingresando tu correo electrónico en la barra lateral de la derecha. Gracias :)
daniel dice:

julio 11, 2018 en 4:30 pm

Hola amigo, un gran aporte me sirvió mucho, Saludos