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

I'm testing the the new Charts Framework from Apple with Xcode 14.0 Beta 2. But I face some strange issues when I try to scale the y-axis to some concrete values.

var body: some View {
        VStack {
            GroupBox("Serien") {
                Chart {
                    ForEach(seriesData) { series in
                        BarMark(
                            x: .value("Series", series.name),
                            y: .value("Wert", series.value)
                        )
                        .cornerRadius(8.0)
                        .annotation(position: .overlay, alignment: .top, spacing: 10.0) {
                            Text("\(series.value)")
                                .foregroundColor(.white)
                                .fontWeight(.bold)
                        }
                    }
                    RuleMark(y: .value("Durchschnitt", shotResult.wrappedSeriesAsInt.mean()))
                        .foregroundStyle(.red)
                }
                .chartYScale(domain: minSeriesYAxis...maxSeriesYAxis)
                .frame(height: 220, alignment: .topLeading)
            }
            .backgroundStyle(Color.white)
            .shadow(radius: 5.0, x: 2.0, y: 2.0)
        }
    }

Resulting View

The LineMark or RectangleMark looks ok. But e.g. the AreaMark has the same issue.

Replies

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.

  • Still an issue in Xcode Version 14.0 beta 3 (14A5270f).

Add a Comment