SwiftUI chart legend overflow

Using Charts in SwiftUI to create a horizontal bar chart, if the text of the legend is sufficiently long, the text overflows outside of the view rather than wrapping or moving to the next line. (can see problem when running code on on iPhone)

Is this a bug or am I doing something incorrectly?

I can use .clipped() to ensure the legend doesn't overflow. But that doesn't fully solve the problem because the text is then just cut off.

import Charts
import SwiftUI

struct ChartData: Identifiable {
    let id: Int
    let title: String
    let count: Double
    let color: Color
}

struct ContentView: View {
    private let data = [
        ChartData(id: 1, title: "Item 1", count: 4, color: .yellow),
        ChartData(id: 2, title: "Item 2 With a Long Title and then some more", count: 6, color: .blue),
        ChartData(id: 3, title: "Item 3 With a Long Title", count: 12, color: .green)
    ]
    private let chartHeight: CGFloat = 40
    private let chartCornerRadius: CGFloat = 5

    var body: some View {
        VStack {
            Chart(data) { item in
                BarMark(
                    x: .value("Count", item.count),
                    stacking: .normalized
                )
                .foregroundStyle(by: .value("Title", item.title))
            }
            .chartXAxis(.hidden)
            .chartYAxis(.hidden)
            .chartLegend(.visible)
            .chartPlotStyle { chartContent in
                chartContent
                    .frame(height: chartHeight)
            }
            .chartForegroundStyleScale(range: data.map { $0.color })
            
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

I tried with Xcode 16.0ß and Xcode 15.3, on iOS 17.4 and 18.0 simulators and got a correct result. It is not wrapped but correctly positioned and sized.

So I extended your text further more and got a correct result again:

And even more, to exceed width limit:

        ChartData(id: 2, title: "Item 2 With a Long Title and then some more and even some more for a crazy legend length", count: 6, color: .blue),

Then it did not work.

I used a different modifier to build the legend manually:

            .chartLegend(alignment: .leading, content: {
                HStack(alignment: .top, spacing: 5) {
                    ForEach(data) { d in
                        HStack {
                            Text("•")
                                .font(.system(size: 48))
                                .bold()
                                .foregroundStyle(d.color)
                            Text("\(d.title)")
                                .font(.system(size: 14))
                                .lineLimit(nil)    // Multilines
                                .foregroundStyle(Color.gray)
                        }
                        .frame(width: 125, height: 120)
                    }
                }
            })

You can adapt content to better fit your need.

Looks like you are using an iPhone Pro Max size in the simulator, which is why your first two examples work. If you run those examples on an iPhone Pro size, the overflow problem appears.

Thanks for the suggestion about the custom-built legend. Yes I'm aware that I can build a custom legend and have done so in other situations. Here I'd like to use the default legend, but it's not working. But I'll be sure to keep the custom-legend option in mind.

SwiftUI chart legend overflow
 
 
Q