【SwiftUI】ChartのX軸Y軸の目盛りを編集する

# はじめに
Chartの折れ線グラフの目盛りに関して調べたので記事にしておきます。

# デフォルト実装
本記事で使用する実装です。
この実装をベースに機能を追加していきます。
```swift
import SwiftUI
import Charts

struct Temperature {
    let day: Int
    let max: Double
    let min: Double
}

struct ContentView: View {
    @State private var temperatures: [Temperature] = [
        .init(day: 1, max: 23, min: 13),
        .init(day: 2, max: 25, min: 10),
        .init(day: 3, max: 23, min: 11),
        .init(day: 4, max: 21, min: 11),
        .init(day: 5, max: 18, min: 12),
        .init(day: 6, max: 19, min: 13),
        .init(day: 7, max: 18, min: 15),
        .init(day: 8, max: 22, min: 9),
        .init(day: 9, max: 23, min: 10),
        .init(day: 10, max: 24, min: 13),
    ]
    
    var body: some View {
        Chart {
            ForEach(temperatures, id: \.day) { temperature in
                LineMark(
                    x: .value("day", temperature.day),
                    y: .value("max", temperature.max)
                )
            }
        }
        .frame(width: 300, height: 500)
    }
}
```

![スクリーンショット 2024-01-12 22.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c5a9e2ec-b99d-a20e-6417-5b631d66d80f.png)

# X軸の目盛りの間隔を編集したい
`.automatic(minimumStride: 増加数, desiredCount: 目盛りの数)`です。
`minimumStride`を1、`desiredCount`を10にすると以下のようになります。
```diff_swift
    Chart {
        ForEach(temperatures, id: \.day) { temperature in
            LineMark(
                x: .value("day", temperature.day),
                y: .value("max", temperature.max)
            )
        }
    }
+   .chartXAxis {
+       AxisMarks(values: .automatic(minimumStride: 1, desiredCount: 10))
+   }
    .frame(width: 300, height: 500)
```

![スクリーンショット 2024-01-12 22.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/d2315403-a2a9-392e-22e2-e10c37fcf3d6.png)

`minimumStride`を2にすると目盛りが2ずつ増えていきます。
```diff_swift
    Chart {
        ForEach(temperatures, id: \.day) { temperature in
            LineMark(
                x: .value("day", temperature.day),
                y: .value("max", temperature.max)
            )
        }
    }
+   .chartXAxis {
+       AxisMarks(values: .automatic(minimumStride: 2, desiredCount: 10))
+   }
    .frame(width: 300, height: 300)
```

![スクリーンショット 2024-01-12 22.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e5139c36-f7cd-5487-e868-397df576e7b8.png)

# X軸の目盛りのテキストを編集したい
```diff_swift
    Chart {
        ForEach(temperatures, id: \.day) { temperature in
            LineMark(
                x: .value("day", temperature.day),
                y: .value("max", temperature.max)
            )
        }
    }
    .chartXAxis {
+       AxisMarks(values: .automatic(minimumStride: 1, desiredCount: 10)) { axisValue in
+           AxisValueLabel {
+               Text(axisValue.index.description)
+                   .font(.system(size: 20, weight: .bold))
+                   .foregroundStyle(.green)
+           }
+       }
    }
    .frame(width: 300, height: 300)
```

![スクリーンショット 2024-01-12 22.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/32e38a67-af48-93ee-ff8c-31ba354951d2.png)

# X軸の目盛りを実線と点線で交互に描画したい
```diff_swift
    Chart {
        ForEach(temperatures, id: \.day) { temperature in
            LineMark(
                x: .value("day", temperature.day),
                y: .value("max", temperature.max)
            )
        }
    }
+   .chartXAxis {
+       AxisMarks(values: .automatic(minimumStride: 1, desiredCount: 10)) { axisValue in
+           AxisGridLine(stroke: .init(dash: axisValue.index.isMultiple(of: 2) ? [] : [4, 4]))
+       }
+   }
    .frame(width: 300, height: 300)
```

![スクリーンショット 2024-01-12 22.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bd7d9411-8a4a-b8ed-c571-cbb38f708806.png)

# X軸の目盛りと目盛りの間に区切り線を表示したい
```diff_swift
    Chart {
        ForEach(temperatures, id: \.day) { temperature in
            LineMark(
                x: .value("day", temperature.day),
                y: .value("max", temperature.max)
            )
        }
    }
+   .chartXAxis {
+       AxisMarks(values: .automatic(minimumStride: 1, desiredCount: 10)) { axisValue in
+           AxisTick(stroke: .init(lineWidth: 1))
+           AxisValueLabel() // 目盛りの値を表示するために必要
+       }
+   }
    .frame(width: 300, height: 300)
```

![スクリーンショット 2024-01-12 22.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9b48366d-afe1-b23d-2e3a-3bce6a8a98de.png)

# おわり
Y軸を編集したい時は`chartXAxis`を`chartYAxis`にするだけです。