[Chartjs]-Print pie chart in chartjs

by

1đź‘Ť

Try using the .toDataURL() method on your canvas. This method returns a URL containing your chart as an image.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

  • Grab your pie chart’s canvas and convert it to an image: document.getElementbyId('pieChart').toDataURL;

  • Assign the generated chart image URL to a variable, let’s keep using printContents in this case: let **printContents** = document.getElementbyId('pieChart').toDataURL;

  • Initiate an html document on the fly and append the previously created image URL as an <img> element’s source, using template literals to embed the printContents variable: let html = <html><head><title></title></head><body><img src=${printContent}></body></html>
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

-Execute the print job (Chrome) by writing the previously constructed html doc to the print window on the fly:

let **printWindow** = window.open('', 'Print-Preview', 'height=900,width=200'); 

printWindow.document.open();

printwindow.document.write(html);

printWindow.document.close();

0đź‘Ť

Yes, it has to do with the animation. You need to check for the animation being complete. Under options add:

    animation: {
    onComplete: done                   
}

and then create a function “done” where you handle the printing.

function done() {

}

Leave a comment