Question

18

Print chart using chart js

rated 0 times [ 25] [ 7] / answers: 1 / hits: 21225 / 6 Years ago, thu, september 13, 2018, 12:00:00

I am using Chart JS library to create charts https://www.chartjs.org/

Say I have the below code

 <div class=card-body >

        <canvas id=bidStatus></canvas>

  </div>

Using the FileSaver.js I am able to save the chart using the below code

function DownloadImage() {

    $(#bidStatus).get(0).toBlob(function (blob) {

        saveAs(blob, BidStatus.png);

    });

}

But I am not sure how I can print the chart. Don't see any native API call to do that. Can some one please tell me how I can achieve this.

I tried using jquery print libraries which are mentioned in the Print an HTMl element example but they don't seem to load the chart generated using Chart js. I get a blank page for printing.

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

answered 6 Years ago deanna · Accepted Answer

This function prints the contents of a Canvas correctly

function PrintImage() {

    var canvas = document.getElementById(bidStatus);

    var win = window.open();

    win.document.write(<br><img src=' + canvas.toDataURL() + '/>);

    win.print();

    win.location.reload();



}