The chart shrinks when I apply a larger scale on it's parent container

[zhonglin94]

Hi Recharts experts!

The chart shrinks when I apply a larger scale on the parent container. The following is a video demonstrating the issue.

Thank you so much if you could take a look and give me some suggestions!

2024-02-29.7.32.28.mov

[ckifer]

It looks like things are just adjusting from the margin on the chart. You could try reducing margin on the fly maybe or starting off with less?

[zhonglin94]

It looks like things are just adjusting from the margin on the chart. You could try reducing margin on the fly maybe or starting off with less?

Hi Ckifer, I did not see any margin that has been applied to the chart when I adjust the parent container's scale. I can reproduce this in the recharts official website.

2024-03-01.6.38.14.1.mov

[ckifer]

These things do not look the same. Here with scale or transform: scale there is no movement in the chart size and the margin of the chart is unchanged. This is correct behavior.

The first video is different than the second - what are you using for scale in the first video?

[zhonglin94]

These things do not look the same. Here with scale or transform: scale there is no movement in the chart size and the margin of the chart is unchanged. This is correct behavior.

The first video is different than the second - what are you using for scale in the first video?

The chart is placed inside the react flow's node and the transform of react flow view port is "transform: translate(-3447.32px, -1646.51px) scale(2.85055)" for example.

[ckifer]

transform: scale works on the recharts website and other places I've checked without moving the axis.

Are you positive that you aren't dynamically changing chart margin based upon the scale yourself? I can't see any other reason why it would move like that

recharts-transform-scale.mov

[ckifer]

Unless you are using an old version of recharts, which may have this issue

[RrYusheng]

I set the composedchart prop like this：

but it seems still not working properly：

[RrYusheng]

looks like Yaxis is been compressed

[ckifer]

You have static heights and widths on some of your components, those might be causing issues. Both grid and YAxis shouldn't have a width/height

[zhonglin94]

Unless you are using an old version of recharts, which may have this issue

Hi Ckifer, I think that I have found the root cause for this issue: the legend size(height and width) provided by the getBoundingClientRects is changed if it's parent container is transformed using scale. If the container scale is 3x, then the legend height is significantly larger than usual, which makes the chart content visibly smaller than expected.

Consequently, I propose to fix this issue as following:

[ckifer]

Thanks for the find - makes sense since I was testing without Legend. Please feel free to contribute the fix if you'd like!

[ckifer]

released in 2.12.3