Requirements

I'm using Swift Charts to create a line chart representing stock values over time, and I'm aiming for a design with inset ticks at every month. I need the start, end, and middle ticks to be larger and include a label below the tick.

Progress

I have been working on a quick POC in Swift Charts and have managed to make the axis look like this:

It's close to the design, but I have two outstanding issues:

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

I’ve set the vertical spacing to 0, but I notice there's about 16 points of spacing between the bottom axis grid line and the axis value label. Setting verticalSpacing to -16 gives me the result I want, but it doesn’t feel like the right solution. Where does this extra spacing come from, and how can I fix it?

2. First and Last X-Axis Ticks with Date Labels

I want to ensure that the first and last X-axis ticks are major ticks with the corresponding date labels. How can I make sure these ticks are marked as major and have labels?

Associated code:

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(pactName))
            }
        }

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

#Preview {
    ContentView()
}