How to print a page with multiple charts?

[amityweb]

Hi.

I would like to be able to have a button to print the page but only the charts. Not the website header and footer. So I tried using some JS print libraries to do it, as you can target the content container, e.g. PrintJS and PrintThis. But using these the CanvasJS charts are not printed.

If I use the browser print they appear, but so does the whole page which I dont want.

If I add in exportEnabled, its on a per chart basis. But I may have like 20 charts on a page.

exportEnabled is actually perfect for exporting but I would need it for ALL charts on the page in one export, not individual.

So does anyone have any ideas how to achieve this?

Thanks a lot

[Vishwas R]

@amityweb,

You can merge all the charts into single image with the help of html2canvas library and then print the image. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[amityweb]

That totally worked! Thats great, thanks a lot!

[hassanmoin21]

How to do it can you share some stuff?

[Vishwas R]

@hassanmoin21,

Please take a look at this JSFiddle – which is already mentioned in the previous reply-post.

—
Vishwas R
Team CanvasJS

[Ady Shaputra]

but how can the legend in the pie chart be seen when printed with html2canvas?

• This reply was modified 1 year ago by Ady Shaputra.
• This reply was modified 1 year ago by Ady Shaputra.

[Vishwas R]

@ady-shaputra,

It seems to be exporting along with the chart legend.

If you are still facing the issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into it and help you resolve.

—
Vishwas R
Team CanvasJS

[Author]

Posts