Swift Charts legend overflowing outside frame

I'm building an app that lets users create charts with custom values and while testing, I came up with this bug that happens when the view width forces the legend to have more than 1 line. Due to Swift trying to align the different labels vertically, it's forcing the first line to overflow.

Here's the code to generate this:

import SwiftUI
import Charts


struct DonutView: View {
    var countries:[(country:String, count:Int)] = [
        (country: "Africa", count: 54),
        (country: "Asia", count: 48),
        (country: "Europe", count: 44),
        (country: "North America", count: 23),
        (country: "Oceania", count: 14),
        (country: "South America", count: 12),
    ]
    
    var body: some View {
        Chart {
            ForEach(0..<countries.count, id:\.self) { idx in
                SectorMark(
                    angle: .value(countries[idx].country, countries[idx].count),
                    innerRadius: .ratio(0.5)
                )
                .foregroundStyle(by: .value("label", countries[idx].country))
            }
        }
        .frame(width: 310, height: 270)
        .border(.blue, width: 1)
    }
}

Has anyone seen this? Is there a solution?

I know about building custom legends, but SwiftUI has no wrapping HStack nor VStack, and the app allows users to change the legend position from the bottom to the top or sides. If I were to go this way, I'd have to write a very large chunk of code to bypass what seems to be a bug.

Seems like you have an explicitly sized frame and the chart doesn't fit your defined frame. This should be fine if you only define a height and not the width

.scaledToFit()
 .frame(height: 270)

You can also use fixedSize(horizontal:vertical:) to maintains the ideal size

 .frame(height: 270)
 .fixedSize(horizontal: true, vertical: true)
Swift Charts legend overflowing outside frame
 
 
Q