How to use chart destroy API and render new chart in Chart JS

How to use chart destroy API

In this video you will understand how to use the chart destroy API.

This feature is not use often by most static charts but if you go more dynamic this might be essential. The chart destroy API gives us the option to re-render the chart. So what does that mean?

When use chart destroy API?

You will only need to destroy the chart and re-render it if you need to change something else besides the dataset. Re-render basically means redrawing the chart. If you update the datasets we tend to use the chart.update() method.

How to Change Chart Types in Chart js with buttons

However, imagine you want to change the chart from a Line Chart to a Radar Chart when you select a radio button. In this scenario you need to have redrawn the axes to a radial axis and remove the linear cartesian axes which are the x-axis and y-axis.

The standard chart.update() will not remove the currently drawn grid lines and x-axis and y-axis. They need to be remove or in other words destroyed. If we do not destroy the chart the lines will be maintained and you will have additional lines besides the radar chart lines.

In this case the destroy chart is a must use. We need to use chart.destroy() API to make the canvas a white slate and from that point on we need to re-render or in other words redraw the new chart with the new grid lines. The video below shows you how.