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:

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

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í:

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

Reiniciar o limpiar gráfica de Chart.js

Por parzibyte Tiempo de lectura: 1 min
8