Chart.js: Export to PDF support

Created on 11 May 2013 · 8Comments · Source: chartjs/Chart.js

It would be really helpful to give users the option to be able to export the graphs to PDF. Is there any way to do this right now?

Source

pinara747

Most helpful comment

PDF support isn't really within the scope of Chart.js, but you can export your canvas to a base64 string as an image, which you can do what you will with.

//Where ctx is the 2d context of your canvas.
//Returns a base64 string of the canvas image
ctx.canvas.toDataURL()

nnnick on 13 May 2013

👍6

All 8 comments

PDF support isn't really within the scope of Chart.js, but you can export your canvas to a base64 string as an image, which you can do what you will with.

//Where ctx is the 2d context of your canvas.
//Returns a base64 string of the canvas image
ctx.canvas.toDataURL()

nnnick on 13 May 2013

👍6

@nnnick when I call "toDataURL()" the chart isn't full rendered yet, so the base64 string is incomplete. Is there any way to turn around this problem?

Follow below my code:

new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
document.getElementById("chart_image").src = document.getElementById("canvas").toDataURL();

FabricioFFC on 25 Sep 2013

Any news regarding this aspect ?
I'm also looking for a way to save chart.js generated canvas as image to embed them later in a pdf file ....

ANy clue would be very appreciated. Thanks

simogeo on 12 May 2014

For information, the use of onAnimationComplete is needed

See : http://jsfiddle.net/AbdiasSoftware/KSgV7/1/

simogeo on 12 May 2014

@FabricioFFC @simogeo

Hi there. Could you use the approach to put the data in pdf? Thanks.

metaxos on 19 Feb 2015

Here is what I'm using to convert the toDataURL() to a png image and save on my server, if it is of any help:
_PHP code_

    // Interpret data uri
    $uriPhp = 'data://' . substr($file, 5);
    // Get content
    $binary = file_get_contents($uriPhp);

    $file = 'uploads/charts/'. time() .'.png';

    // Save image
    file_put_contents($file, $binary);

_Reference: http://stackoverflow.com/a/6735458/4575150_

DiogoAbu on 21 Feb 2015

👍2

@metaxos @FabricioFFC : more or less the same here ...

simogeo on 23 Feb 2015

Proper way is to use toDataURL method to get the chart image data and then add them to a pdf file. However when everything fails, a lazy but effective solution is to render your content on client side and use a combination of javascript utilities to screenshot desired chart(s) (ex: html2canvas.js) and generate a pdf out of them (ex: jsPdf.js)