Issue with redrawing chart's legend when external zoom is applied

[Lackard]

I'm developing charts that can be used in an external web application that creates some dashboards. Most of the dashboards consists of multiple charts so in order to show them all at once the web application has it's own buttons for zooming the whole view. Unfortunately the zooming is achieved by applying a transform matrix to the div element that contains all of the charts. This obviously introduced the problem with cursor's offset but I've dealt with that by adding the recommended resize function to the root element:
root = am5.Root.new(rootContainer, { calculateSize: function(dimensions) { return { width: rootContainer.clientWidth, height: rootContainer.clientHeight }; }});
This solved the problem with the offset however I'm still facing an issue with proper resizing of chart's legend and labels.
The original chart looks like this:

After applying the external zoom (div's style: transform: matrix(0.49, 0, 0, 0.49, 0, 0)) the chart looks like this:

As seen above the tooltips and labels are not scaled and the legend takes up disproportionately more space than the graph (mainly because the layout changed automatically from grid to column). Also for me it seems that the labels in the legend should be smaller.

What's interesting is that the older chart written with amcharts 4 (right) is scaled properly:

I tried to move the legend to a different container and create a legendRoot element with calculateSize function however it didn't really work. Is there any way to make legend and other elements scale proportionally with graph without changing the layout of the chart?

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[Lackard]

I've managed to roughly recreate the conditions. Here is the link:
https://jsfiddle.net/Lackard/67vcdsu0/50/

[martynasma]

Thanks. Though I don't see any issues with the legend when zooming in/out:

[Lackard]

Please zoom it out a little bit more :) :

In those cases the graph becomes unreadable and the legend doesn't fit in the main container.
Also in the previous examples you can still see that the legend elements don't really change their size. Instead they are getting wrapped up (it looks like their container is getting smaller but at the same time the elements stay the same size).

What I would like to achieve is to properly redraw whole chart in a proper scale (together with tooltips, labels, etc.) without changing it's layout and to avoid cursor's offset at the same time:

[martynasma]

This is by design. There's really no way to scale an amCharts 5 chart using CSS. You can scale the div, but the chart itself will adjust for the new dimensions, but it will still draw normal-sized elements.

We're currently experimenting with a way to truly scale the chart, but there's no ETA or guarantee it will ever work.

If it does, I'll let you know here.

That said, scaling down the chart as it is, is not a very good UX, since it reduces readability and user's ability to interact with the chart effectively.

[Lackard]

Yeah, I agree that this css scaling is really problematic. Unfortunately I can't do anything about it since that's how the external web application works and I need to get in line with that.

Thank you for your feedback and please let me know if anything changes.