【Swift】Chartで作成したグラフの背景色やラベルなどの表示制御について

概要
- 環境
サイズ、背景色、枠線の制御
XやY軸に対してラベルの表示制御
グラフに対してグリッド線や目盛り線の表示制御
まとめ

概要

Chartで作成したグラフに対して背景色をつけたり、X軸やY軸のグリッドやラベルの表示を制御する方法を紹介します。

環境

この記事は以下のバージョン環境のもと作成されたものです。
【Xcode】14.0
【iOS】16.0
【macOS】Monterey バージョン 12.5

サイズ、背景色、枠線の制御

chartPlotStyleを使用することでグラフのサイズや背景色、枠線に対してなどの制御を行うことができます。

Chart {
    ...
}
.chartPlotStyle { content in
    content
        .frame(width: 400, height: 250)
        .background(.blue.opacity(0.2))
        .border(.blue, width: 1)
}
.preferredColorScheme(.dark)

contentに対してmodifierを追加することでグラフのサイズや背景色、グラフの枠線の色や太さを指定することができます。
また背景色をより際立たせるためにpreferredColorSchemeを使用してダークモードにしています。

XやY軸に対してラベルの表示制御

XやY軸に対してラベルの表示制御を行うにはchartXAxisLabel及びchartYAxisLabelを使用します。

Chart {
    ...
}
.chartXAxisLabel(position: .bottom, alignment: .center, spacing: 0) {
    Text("X軸ラベル")
        .font(.title3)
        .foregroundColor(.purple)
}
.chartYAxisLabel(position: .leading, alignment: .top, spacing: 0) {
    Text("Y軸ラベル")
        .font(.title3)
        .foregroundColor(.purple)
}

chartXAxisLabelで宣言をし、positionではグラフに対して表示させたい位置を指定し、alignmentではpositionで指定した位置内での配置を指定し、spacingではグラフとの間に任意の値の余白を入れることができます。
例えば上記のサンプルコード内のchartXAxisLabelでは以下のように定義しています。

position: .bottomでグラフの下側にラベルを表示
alignment: .centerでpositionで指定した表示位置内で真ん中に表示
spacing: 0でグラフとの余白は0

あとはクロージャーの中でTextやImageなど表示させたいViewを渡すと任意の文字列や画像などを表示することができます。

グラフに対してグリッド線や目盛り線の表示制御

グラフに対してグリッド線や目盛り線の表示制御を行うにはchartXAxis及びchartYAxisを使用します。

Chart {
    ...
}
.chartXAxis {

}
.chartYAxis {

}

chartXAxis及びchartYAxisを呼び出し、空の状態にするとグリッド線や目盛り線が消えます。
デフォルトではそれぞれある程度見栄えのよいグラフを表示するために、裏側で自動的に処理してくれていますが、chartXAxis及びchartYAxisを呼び出したことにより、明示的に定義しないと全て表示されなくなるためです。

Chart {
    ...
}
.chartXAxis {
    AxisMarks(values: .automatic(desiredCount: 5)) { value in
        AxisGridLine(stroke: StrokeStyle(lineWidth: 1))
        AxisTick(length: 16, stroke: StrokeStyle(lineWidth: 1))
        AxisValueLabel(anchor: UnitPoint(x: 1, y: 0)) {
            if let intValue = value.as(Int.self) {
                Text("\(intValue) 個")
                    .font(.caption2)
                    .foregroundColor(.purple.opacity(0.8))
            }
        }
    }
}
.chartYAxis {
    AxisMarks(preset: .inset, position: .leading, values: .automatic) { value in
        AxisGridLine()
        AxisTick()
        AxisValueLabel()
    }
}

AxisMarks内では主に「軸に対する目盛り」の表示制御を指定することができます。
その中で何がどこの表示制御を行っているのかは以下の通りです。

AxisMarks(values: .automatic(desiredCount: 5))：目盛り線の数を表示制御することができます。ここでは目盛り線の数は5、最大値1250となっていますので1本あたり250で目盛り線が表示されます。
preset：グラフのどの位置に目盛りラベルを表示させるかを指定することができます。ここでは.insetとすることでグラフ内に表示させています。
AxisGridLine：グリッド線を表示することができます。lineWidthで線の太さを指定することもできます。
AxisTick：目盛りラベルに対して仕切り線を表示制御することができます。
AxisValueLabel：目盛りラベルに関して表示制御することができます。またクロージャー内で任意の文字を定義したり、AxisMarksのvalueを使用することで、表示する値に単位を付けることもできます。