SwiftUI Charts Issue - Axis Marks

Question

Created Jan ’23

Replies 1

Boosts 0

Views 1.8k

Participants 2

I'm having an issue with SwiftUI charts and was wondering if anyone knows of a solution or has also run into this. I've been trying to plot data for my app and the X axis does not show the dates and the Y axis only has axis marks 0-9. So, I tried to make another file instance to check what's going on. This is what I have


import Charts
import SwiftUI

struct Exercise: Identifiable {
    let id = UUID()
    var dateCompleted: Date
    var reps: Int
}


struct ContentView: View {
    
    private var exerciseMaxRepsArray: [Exercise] = []

    init() { // init dummy data
        for i in 0 ..< 20 {
            let date = Calendar.current.date(byAdding: .day, value: i, to: .now) ?? .now
            let rep = Int.random(in: 1...20)
            exerciseMaxRepsArray.append(
                Exercise(dateCompleted: date, reps: rep)
            )
        }
    }

    var body: some View {
        
        GroupBox(label: Text("Daily Max Reps")) {
            Chart(exerciseMaxRepsArray) { e in
                LineMark(x: .value("Date", e.dateCompleted, unit: .day),
                         y: .value("Reps", e.reps)
                ) }
            .chartYAxisLabel(position: .trailing, alignment: .center) {
                Text("Reps")
            }
            .chartXAxisLabel(position: .bottom, alignment: .center) {
                Text("Date")
                
            }
            }

and this is the result:

Simulator Screen Shot - iPhone 14 Pro - 2023-01-11 at 20.24.49.png

I've checked and the issue is not the frame. Has anyone else had this issue or have any clue what could be going on here?

Boost

Answer 1

orangeowl OP

Jan ’23

Hi, I've just started playing with swiftUI and the charts framework myself. I copied your code verbatim, into a brand new project and it seems to be fine:

Simulator Screen Shot - iPhone 14 - 2023-02-01 at 17.54.15.jpg

I did remove the axis labels to check if it made a difference and it still looks fine without them:

var body: some View {
    GroupBox(label: Text("Daily Max Reps")) {
      Chart(exerciseMaxRepsArray) { e in
        LineMark(x: .value("Date", e.dateCompleted, unit: .day),
                 y: .value("Reps", e.reps))
      }
    }
  }

This is with a brand new project with nothing but your code. It seems strange that your axis's seem so wrong in the screenshot with the provided code. Not sure if that helps, but wishing you the best of luck.

0