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.

@martynasma

[abhay-jain03]

@martynasma I am also getting same issue. Even, I had tried to export canvas/svg using the above code for downloading pdf which use aspose library.

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

Promise.all(promise).then(function (values) {
var count = 0;
for (let j = 1; j <= 3; j++) {
var nod = $("#chartdiv" + j)[0];
if (nod) {
var imgNode = $("#imgchartdiv" + j)[0];
if (imgNode) {
$("#imgchartdiv" + j).insertAfter(values[count]);
count++;
}
}
}
})

`

[habu23183]

@martynasma Even i am facing same issue.

[prachi7049]

@martynasma Experiencing the same issue at my end as well, PDF generated via aspose is not clear enough

[martynasma]

OK, so here's a very small test case:
https://codepen.io/team/amcharts/pen/zYVzNpX/33f29eb2ab1b0e0018982aea995ad496?editors=0010

It has two small charts:

1. The first one exports PDF blurry.
2. The second has minWidth: 2000 set so PDF exports crisp.

Do you have the same results?

[nitinsdev01]

Using minWidth: 2000 helped to generate better quality, however the file size almost got double.
Reducing minWidth to even 1900 or 1800 reduces the size but quality as well. Is there any new code update in amcharts5 (in comparison with amcharts4) where we can reduce the file size without hampering quality of charts.

[martynasma]

Perhaps we can add a PDF setting to not try and fit the image into the width of the page.

This would solve the bullriness issue as well as size because smaller charts would display smaller, without need to upscale them.

Let us experiment with this a little, and get back to you.

[martynasma]

Fixed in 5.10.1.

[5.10.1] - 2024-08-09

Added

• fillGradient setting added to Label.

Changed

• Exporting a PDF will now check image size and will not scale it up to fit page size if it's smaller. It will still scale dowwn the image to fit in the page.

Fixed

• Memory leak with axis ranges on LineSeries fixed.
• PieSeries tick was not visible if pie had two equal slices.
• root.nonce was not being added to all dynamically-loaded stylesheets.
• A stack overflow could occur when auto-zooming a ValueAxis in some very rare cases.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.