【SwiftUI】Chartをスクロール可能に変更する

はじめに

チャートをスクロール可能にする機能の紹介します。

サンプルアプリ

実装

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)
                )
            }
        }
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: 5)
        .frame(width: 300, height: 300)
    }
}

解説

グラフをスクロールするためのモディファイアです。
単純にスクロールさせたいだけであればこれだけで大丈夫です。

.chartScrollableAxes(.horizontal)

しかし、初期グラフで〇〇の値まで表示させたいといったことが多いと思います。
そんな時に使うのが、chartXVisibleDomainです。
今回はlengthを5に設定しているので初期グラフでスクロールせずに5まで表示されています。

.chartXVisibleDomain(length: 5)

目盛りが振られていませんが、5まで表示されています。

おわり

Chart関係の記事を書いてるのでみてみてください