charts printed using am5 library appear blurry in the PDF

[nitinsdev01]

Using below code with exporting library (https://cdn.amcharts.com/lib/5/plugins/exporting.js), we are getting blurry charts in PDF that is being printed using aspose. Can we do something to get better quality charts in PDF as UI. @martynasma Please suggest.

for (let i = 1; i <= 3; i++) { try { var divId = 'chartdiv' + i; var root = eval('root' + 1); var exporting = amSplugins_exporting.Exporting.new(root, { pngOptions: { quality: 0.8, maintainPixelRatio: true } }); promise.push(exporting.export("png")); var node = $("#" + divId)[0]; var elem = $("< img/>")[0]; elem.id = "img" + divId; node.appendChild(elem); } catch (e) { } }

[martynasma]

You may set quality to a higher number: https://www.amcharts.com/docs/v5/concepts/exporting/exporting-images/#Image_quality

Also upscale the size using minWidth and minHeight settings: https://www.amcharts.com/docs/v5/concepts/exporting/exporting-images/#Sizing_exported_image

[nitinsdev01]

You may set quality to a higher number: https://www.amcharts.com/docs/v5/concepts/exporting/exporting-images/#Image_quality

Also upscale the size using minWidth and minHeight settings: https://www.amcharts.com/docs/v5/concepts/exporting/exporting-images/#Sizing_exported_image

I tried the suggested solutions, however It didn't worked and charts are still printing blurry. Adding the code below for reference:

for (let i = 1; i <= 3; i++) { try { var divId = 'chartdiv' + i; var root = eval('root' + 1); var exporting = amSplugins_exporting.Exporting.new(root, { pngOptions: { quality: 1, //tried 2,3 and 5 too minWidth: 1000, //tried width: am5.p100 too maxWidth: 2000 } }); promise.push(exporting.export("png")); var node = $("#" + divId)[0]; var elem = $("< img/>")[0]; elem.id = "img" + divId; node.appendChild(elem); } catch (e) { } }

[martynasma]

The next thing to try is enabling pixel ratio: https://www.amcharts.com/docs/v5/concepts/exporting/exporting-images/#Pixel_ratio

[nitinsdev01]

Used this one as well, still getting blurry charts in PDF.

[martynasma]

Is perhaps your source chart very small in size?

[nitinsdev01]

No charts are not small in size, charts are given width of parents div which is 100% of container. In above sample code we have mentioned that too. PFB line below for reference

minWidth: 1000, //tried width: am5.p100 too

Here p100 states for 100 percent of parent div

[martynasma]

minWidth and related settings accept only absolute values, so percent ones won't work.

Try setting both minWidth and minHeight to even higher values.

[nitinsdev01]

Tried 1000, 1500 and even 2000 but that didn't made quality of the charts any better.

Can we print charts as canvas elements itself using am5 ?

When we are using am4, we get SVG in UI and are able to convert to high quality images in print version. However there is no such method available for printing canvas version in am5 as is with high quality.