Chart.js Tutorial - Save chart as image

In this video, we'll show you how to let user save or download the generated chart as image (.png file) I've prepared all the necessary code needed for chart.js bar chart And also a dummy button which we'll get it to work soon To let the user able to save file, we're going to use a 2 Polyfill libraries called FileSaver.js and canvas-toBlob.js FileSaver.js is a very useful Polyfill library that let user save the file to their local machine FileSaver.js supports IE10+, Firefox and Chrome However, FileSaver.js needs a "Blob" object which represent the file we generated. So we'll need another js library for Blob object canvas-toBlob.js will let us generate the Blob object directly from canvas (our chart) So then we can pass it to FileSaver.js canvas-toBlob.js also supports IE10+, Firefox and Chrome I've already included all the libraries to the fiddle (FileSaver.js, chart.js and canvas-toBlob.js) First, use we'll get our chart canvas using jQuery Then call toBlob() Finally, call saveAs() and pass the blob to it and also a file name (anything.png) Thank you for watching! Please like or subscribe if you like it :)