Chartist-js: Save chart as image

[voltan]

Hello
Any method possible to save chart as image? I want use chart on pdf export ( use TCPDF ) and I can add chart as image on it

Or any method to draw chart on PDF output

Thanks

[Vamiris]

toDataURL() will give you the base64 encoded PNG of the canvas.

You could use this as the SRC for the image in the pdf.

[VividVisions]

Does Chartist even use the canvas object? I thought, it utilizes SVG.

[ghost]

Hi,

Have you had any luck with this?, I've been having the same problem and couldn't find a solution so far.

Thanks

[shinglehouse01]

I've been struggling with this for a few days now....hopefully someone will be able to figure out some way to do this!

[VividVisions]

Take a look at PhantomJS. https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

[voltan]

Thank you very much, I try work whit it tonight

Best

[shinglehouse01]

@voltan did you have any luck with this? I won't be able to try it out until this coming weekend :( but it does seem promising! Heaven knows I tried a bunch of different stuff last weekend to mixed frustrating results...

[themooserooster]

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

That article details drawing svg to a canvas, from which you can create a PNG.

[preetcam]

Hi Any luck on the above issue ?? . I am using html2canvas to convert my page to PNG, the whole page gets saved, BUT chart created by using chartist.

[gionkunz]

I guess it would be possible with any of the above approaches. However, this will be radically simplified with work done on #810, #813 and #814

[cyrilmesvayn]

if it can helps with people struggling with saving Chartist plots into PNGs, here's how I've done it :

https://gist.github.com/cyrilmesvayn/981767e80ee6fa23fc5611697426ef8c

Right-click on the Canvas, and Save As.

Working example as of July 2017 in Chrome 59 :
https://jsfiddle.net/qvbekmvy/33/

It's possible to use an anchor instead of button to download image automatically by setting href and download attributes, but I couldn't make it work with the time I had with Lines and Bars charts. It does work with Pies. You could also usedownloadjs or something similar to achieve this. (http://danml.com/download.html)

DISCLAMER : This is by no means bulletproof or complete. It works in Chrome, as in my use case I doesn't need to support anything else. It's meant as a starting point for someone figuring out how the heck to do this.

[deQuota]

Hi , I had the same struggle to generate images from the chartist charts.
I was able to do it after some research.

As a help for all of you I have developed a npm module for that one,

https://www.npmjs.com/package/chartist-to-image

Hope this will help all of you, create an issue if anything goes wrong :)

Cheers 👍

[haifzhan]

@deQuota is there any server-side solution for this?

[deQuota]

@haifzhan I am using the dom-to-image package inside chartist-to-image. Since it captures DOM this package cannot be used as a server side solution. What kind of need you have, why it’s necessary to generate charts in server side?

[haifzhan]

@deQuota Thanks for your reply! We are generating PDF report which takes more than 2 minutes and contains more than 50 chart images, our current solution is generating charts sperate from PDF report and then put them together

[deQuota]

@haifzhan I understand your requirement, but I am not much aware of server side rendering. Once we had the same requirement, but we have generated the pdfs also in front end.

https://www.smashingmagazine.com/2014/05/love-generating-svg-javascript-move-to-server/
I hope above link will give some insights on sever side image rendering.