Why are the BarMarks centered on the gridlines and covering the y-axis? I have looked at a bunch of examples, which all do things basically the same way I am doing and none of them have this issue. What could I be doing wrong? Thanks

Chart(dailyChartData, id: .day) {
        BarMark(
            x: .value("Date", $0.day),
            y: .value("Duration", $0.length),
            width: .fixed(20)
        )    
        .foregroundStyle(chartColor.gradient)
        .clipShape(Capsule())
    }
    .frame(height: 200)
    .chartYAxis {
        AxisMarks(values: .automatic(desiredCount: 5)) { value in
            AxisGridLine()
            let formatter: DateComponentsFormatter = {
                let formatter = DateComponentsFormatter()
                formatter.unitsStyle = .abbreviated
                formatter.allowedUnits = [.minute]
                return formatter
            }()
            if let timeInterval = value.as(TimeInterval.self), 
                let formatted = formatter.string(from: timeInterval) {
                AxisValueLabel(formatted)
            }
        }
    }
    .chartXAxis {
        AxisMarks(values: .stride(by: .day)) { _ in
            AxisGridLine()
            AxisTick()
            AxisValueLabel(format: .dateTime.weekday(.narrow))
        }
    }