How to ensure consistent PNG export appearance regardless of browser zoom?

[milosevicn]

I'm using AmCharts for data visualization and have encountered an issue with PNG exports of charts when browser zoom is adjusted. Currently, when exporting a chart as a PNG file, its appearance mirrors the browser zoom level. For instance, at 100% browser zoom, the chart looks crisp and well-formatted. However, when the browser zoom is set to 250%, the exported PNG file reflects this, resulting in narrower columns and axis labels on the x-axis is missing marketing label.

Is there a way to ensure that the exported PNG file maintains a consistent appearance, akin to the chart's appearance at 100% browser zoom, irrespective of the actual browser zoom setting? I need the exported PNG file to represent the chart as it appears with browser zoom set to 100%, regardless of the user's browser zoom preference.

Here is how the PNG looks when exported on 100% browser zoom:

And here is how it looks when zoom is 250%:

The example above is from documentation when both JS and Result screens are displayed in codepen.

Is it possible to always have the PNG look as when the browser zoom is set to 100%?

[martynasma]

You can set minimum dimensions of the exported file: https://www.amcharts.com/docs/v4/concepts/exporting/#Dimension_constraints

Hopefully, that helps.

[milosevicn]

Thank you for your response. While setting minimum dimensions for the exported file does help in controlling the overall size, it doesn't address the core issue I'm facing. The problem persists in maintaining the chart's appearance as it would be at 100% browser zoom, regardless of the user's actual browser zoom setting.

To provide further context, the challenge arises particularly with pie charts, where percentage labels become disproportionately large with higher browser zoom levels, leading to overlapping with the chart itself. Therefore, while controlling dimensions is helpful, it doesn't resolve the issue of maintaining the chart's visual integrity across different browser zoom levels.

Here is how my pie chart looks on 100%:

And how it looks on 250% zoom:

Unfortunately, I can't provide code for this particular chart, that's why I am trying to find solution on the example from documentation first. Later I'll be able to implement same solution in my application also.

Basically I am interested if it's possible to prevent browser zoom having any effect on chart itself, because that will automatically be a solution for exporting also.

[martynasma]

In that case you may try scaling export image: https://www.amcharts.com/docs/v4/concepts/exporting/#Scaling_images

[milosevicn]

Scaling the export image also doesn't resolve the core issue. While it adjusts the size of the exported image, it doesn't ensure consistency with the desired appearance. I will just get the bad looking chart in a smaller dimensions.

It would be the best if it's possible to force the chart to be recreated before exporting and to be recreated as when it's 100% browser zoom, no matter how zoomed the webpage currently is.

[milosevicn]

I've found a solution that works for me. Before exporting, I adjust the body zoom based on the current browser zoom level:

document.body.style.zoom = (1 / window.devicePixelRatio);

Then, I recreate the chart. This ensures that the exported chart maintains its appearance, regardless of the browser zoom level.