Destroy chart.js bar graph to redraw other graph in same

by

The correct method to use, in order to be able to draw another chart on the same canvas, is .destroy(). You must call it on the previously created chart object. You may also use the same variable for both charts.

var grapharea = document.getElementById("barChart").getContext("2d");

var myChart = new Chart(grapharea, { type: 'bar', data: barData, options: barOptions });

myChart.destroy();

myChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

Straight from the docs (under Prototype Methods):

.destroy()

Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.

// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();

It explicitly states that this method must be called before the canvas can be reused for a new chart.

.clear() is also mentioned later in the same section as the function that “will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful.” The chart will be alive and well after calling this method, so this is not the method to call, if you want to reuse the canvas for a brand new chart.

To be honest, though, in cases like yours, I have often used a container div to wrap my canvas and, whenever I needed to create a new chart, I placed a new canvas element in this div. I then used this newly created canvas for the new chart. If you ever come across strange behavior, possibly related to charts occupying the canvas before the current chart, have this approach in mind too.

More Related Contents:

  1. Limit labels number on Chart.js line chart
  2. How to add images as labels to Canvas Charts using chart.js
  3. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  4. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  5. Capture HTML Canvas as gif/jpg/png/pdf?
  6. Resizing an image in an HTML5 canvas
  7. Zoom Canvas to Mouse Cursor
  8. Zoom in on a point (using scale and translate)
  9. Does HTML5/Canvas Support Double Buffering?
  10. Canvas image crossplatform insecure error
  11. I want to do animation of an object along a particular path
  12. Draw border around nontransparent part of image on canvas
  13. ChartJS – Different color per data point
  14. Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed]
  15. Detect if user clicks inside a circle
  16. addEventListener for keydown on Canvas
  17. How to set ChartJS Y axis title?
  18. Resize a Base-64 image in JavaScript without using canvas
  19. How to save canvas animation as gif or webm?
  20. Force showing the “Save as” dialog box when downloading a file
  21. clearing circular regions from HTML5 Canvas
  22. How to change colours for Angular-Chart.js
  23. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  24. Creating a Clickable Grid in a Web Browser
  25. Chart JS custom tooltip option?
  26. Save many canvas element as image
  27. How to style canvas elements with CSS
  28. canvas- Cropping images in different shapes
  29. flot graph, use legend to turn on/off series
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment