Requirements

I am using Swift Charts to create a line chart that displays stock values over time, aiming for inset ticks at each month. I need the start, middle, and end ticks to be larger and include a label below, as shown in the design:

Progress

I developed a quick proof-of-concept in Swift Charts and achieved an axis that looks like this:

However, I am facing two issues:

1. Extra Spacing Between the Bottom Axis Grid Line and Value Labels

Although I set the vertical spacing to 0, there is about 16 points of extra space between the bottom grid line and its value label. Using a negative vertical spacing (e.g., -16) fixes it visually, but it doesn't feel like the correct solution. Where does this extra spacing come from, and how can it be properly resolved?

2. Ensuring First and Last X-Axis Ticks Are Major With Date Labels

I want to guarantee that the first and last ticks on the X-axis are treated as major ticks and display the date labels. How can I ensure these ticks are always rendered as major ticks with the correct labels?

Associated Code:

SWIFTCopied
import SwiftUI
import Charts

struct PlanValue: Codable, Identifiable {
    let value: Double
    let date: Date

    var id: Date { date }
}

// Date formatter to parse the date strings
let dateFormatter: ISO8601DateFormatter = {
    let formatter = ISO8601DateFormatter()
    formatter.formatOptions = [.withFullDate]
    return formatter
}()

let fundValues: [PlanValue] = [
    PlanValue(value: 100.58, date: dateFormatter.date(from: "2023-01-30")!),
    PlanValue(value: 200.22, date: dateFormatter.date(from: "2023-01-31")!),
    PlanValue(value: 505.66, date: dateFormatter.date(from: "2023-02-28")!),
    PlanValue(value: 399.33, date: dateFormatter.date(from: "2023-03-31")!),
    PlanValue(value: 5652.37, date: dateFormatter.date(from: "2023-04-30")!),
    PlanValue(value: 5755.66, date: dateFormatter.date(from: "2023-05-31")!),
    PlanValue(value: 5850.81, date: dateFormatter.date(from: "2023-06-30")!),
    PlanValue(value: 6002.82, date: dateFormatter.date(from: "2023-07-31")!),
    PlanValue(value: 5750.62, date: dateFormatter.date(from: "2023-08-31")!),
    PlanValue(value: 5699.93, date: dateFormatter.date(from: "2023-09-30")!),
    PlanValue(value: 5820.01, date: dateFormatter.date(from: "2023-10-31")!),
    PlanValue(value: 6105.03, date: dateFormatter.date(from: "2023-11-30")!),
    PlanValue(value: 6291.02, date: dateFormatter.date(from: "2023-12-31")!),
    PlanValue(value: 6399.48, date: dateFormatter.date(from: "2024-01-31")!),
    PlanValue(value: 6544.99, date: dateFormatter.date(from: "2024-02-29")!),
    PlanValue(value: 6700.69, date: dateFormatter.date(from: "2024-03-31")!),
    PlanValue(value: 6850.57, date: dateFormatter.date(from: "2024-04-30")!),
    PlanValue(value: 6998.78, date: dateFormatter.date(from: "2024-05-31")!),
    PlanValue(value: 6400.39, date: dateFormatter.date(from: "2024-06-30")!),
    PlanValue(value: 6450.33, date: dateFormatter.date(from: "2024-07-31")!),
    PlanValue(value: 29555.39, date: dateFormatter.date(from: "2024-08-31")!),
    PlanValue(value: 30300.39, date: dateFormatter.date(from: "2024-09-30")!),
    PlanValue(value: 30836.33, date: dateFormatter.date(from: "2024-10-31")!),
    PlanValue(value: 30750.06, date: dateFormatter.date(from: "2024-11-30")!),
    PlanValue(value: 31011.97, date: dateFormatter.date(from: "2024-12-31")!),
    PlanValue(value: 32500.24, date: dateFormatter.date(from: "2025-01-29")!)
]

struct ContentView: View {
    var body: some View {
        Chart {
            // Fund Values
            ForEach(fundValues) { planValue in
                LineMark(x: .value("Date", planValue.date),
                         y: .value("Value", planValue.value)
                )
            }
        }
        .chartXAxis {
            let numberOfMajorTicks = 3
            // Major Ticks + Labels
            AxisMarks(preset: .aligned, values: .automatic(desiredCount: numberOfMajorTicks) ) { value in
                AxisValueLabel(format: .dateTime.month().year(.twoDigits), verticalSpacing: 0)
            }
            AxisMarks(preset: .inset, values:  .automatic(desiredCount: numberOfMajorTicks)) { value in
                AxisTick(length: 16, stroke: StrokeStyle(lineWidth: 1))
                    .foregroundStyle(Color.black)
            }

            // Minor Ticks
            AxisMarks(preset: .inset, values: .stride(by: .month)) { value in
                AxisTick(centered: true, length: 8, stroke: StrokeStyle(lineWidth: 1))
                    .foregroundStyle(Color.black)
            }
        }
        .chartYAxis {
            AxisMarks(preset: .aligned, values: .automatic(desiredCount: 7) ) { value in
                let isFirstLine = value.index == 0
                AxisGridLine(stroke: StrokeStyle(lineWidth: 1, dash: [isFirstLine ? 0 : 4], dashPhase: 0))
                    .foregroundStyle(isFirstLine ? .black : .gray)
                AxisValueLabel(format: .currency(code: "GBP").notation(.compactName))
            }
        }

        .frame(height: 275)
        .padding()
    }
}

#Preview {
    ContentView()
}