Keep aspect ratio of Charts


I am new to Figma and this is my first post.

I added a Doughnut Chart (using the Charts plugin) to my responsive prototype, but when the main frame is scaled, the Chart does not scale accordingly: it should scale in both directions (and keep the aspect ratio) but it squishes the Chart instead.
What can I do to prevent this from happening and keep the aspect ratio of the Chart?

Many thanks in advance!


Anyone? I know there are plugins built for keeping aspect ratio, but as far as I know these plugins only consider images instead of Charts or other shapes…

I just tested this and It’s not possible to have a square, frame, or a circle in an auto-layout resize proportionally. You’ll need to set the width to ‘fill’ for it to resize the width automatically with the parent, but the height is no longer linked to the width. even if you have the aspect ratio locked.

One trick you can do is set the parent to ‘hug’ and resize the card by resizing your chart instead.

Another trick is to resize the entire card with the ‘k’ button. (not suggested in most cases)

Thank you so much for your suggestion, Alborz!

Could you elaborate your tricks a bit more?
I know I can resize the Chart / its parent itself, but my problem lies within resizing the Main Frame - how do I keep the aspect ratio of the Chart then?

Thanks again!

I found a solution:

Wait those are all with images.

The solution i proposed only works by resizing the chart. If you resize the page, it distorts the chart sadly.

I’m surprised I’ve never come across this issue before. Since I made the switch to Figma I’ve only designed for web and the height of charts is usually pre-determined. Only the width changes with the screen size.

I’d suggest making a post in ‘share an idea’ so that some Figma folks might see it and put it on the roadmap.

No problem, Alborz! I’ll do that.
Somehow I always manage to encounter these missing features in programs :sweat_smile: