Charts Framework: chartYScale(domain:) scales the y-axis correctly but BarMarks are drawn down to bottom part of the screen

Could you reduce the size of images, to make your post much more readable ? See Best practice here: https://developer.apple.com/forums/thread/706527

Could you explain also what we see on screen ? What is Serien with Ringe title ? I cannot find it in code.

What do you get if you draw only one chart in the Group (you did not provide complete code, so impossible to test).

I implemented an example project which shows the same issue.

import SwiftUI
import Charts


struct Values: Identifiable {
    var name: String
    var value: Int
    var id = UUID()
}

/// Displays an exemplary  bar chart.
struct BarChartView: View {
    var chartData: [Values] = [.init(name: "A", value: 93),
                               .init(name: "B", value: 92),
                               .init(name: "C", value: 90),
                               .init(name: "D", value: 91)]
    var minValueYAxis: Int = 89
    var maxValueYAxis: Int = 93
    
    var average: Double {
        get {
            var sum = 0
            for data in chartData {
                sum += data.value
            }
            return Double(sum) / Double(chartData.count)
        }
    }
    
    var body: some View {
        GroupBox("Results") {
            Chart {
                ForEach(chartData) { values in
                    
                    BarMark(x: .value("name", values.name), y: .value("value", values.value))
                        .cornerRadius(5.0)
                        .annotation(position: .overlay, alignment: .top, spacing: 10.0) {
                            Text("\(values.value)")
                                .foregroundColor(.white)
                                .fontWeight(.bold)
                        }
                    
                    RuleMark(y: .value("average", average))
                        .foregroundStyle(.red)
                        .annotation(position: .overlay, alignment: .bottomTrailing, spacing: 0.0) {
                            Text("ø = \(String(format: "%.2f", average))")
                                .foregroundColor(.red)
                        }
                }
            }
            .chartYScale(domain: minValueYAxis...maxValueYAxis)
            .frame(height: 220, alignment: .top)
        }
        .backgroundStyle(Color.white)
        .shadow(radius: 5.0, x: 2.0, y: 2.0)
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Chart 1")
                BarChartView()
            }
        }
    }
}

If I remove the line .chartYScale(domain: minValueYAxis...maxValueYAxis), everything looks ok, but it is hard to see the differences between the bars. And here's the resulting views on the iPhone 13 simulator.

Heyo! I think the issue is that you're using BarMark(x:y:) when you should be using BarMark(x:ystart:yend:) when using the chartYScale(domain:) modifier. Hope this helps!

Using your example code:

BarMark(
    x: .value("name", values.name),
    yStart: .value("value", values.value),
    yEnd: .value("minValue", minValueYAxis)
)
.cornerRadius(5.0)
.annotation(position: .overlay, alignment: .top, spacing: 10.0) {
    Text("\(values.value)")
        .foregroundColor(.white)
        .fontWeight(.bold)
}

Probably not the right place to ask, but how did you achieve this look? Different line colors