SwiftUI Charts - BarMark 안에 Text 추가

안녕하세요.
오늘은 저번 게시물에 이어서 BarMark안에 Text를 추가하는 기능을 알아보겠습니다.

먼저 결과 사진부터 보겠습니다.

1. SwiftUI Charts에서 막대 내부에 텍스트를 추가하려면 .annotation(position:)을 사용해야 합니다.
annotation을 사용하면 막대 내부뿐만 아니라, 위/아래/좌/우 원하는 위치에 View를 배치할 수 있죠.

.annotation(position:)에는 여러 위치 옵션이 있어서 필요에 따라 적절한 값을 선택해서 사용하면 됩니다.

옵션	설명
.overlay	막대 내부에 View 표시
.top	막대 위에 View 표시
.bottom	막대 아래에 View 표시
.leading	막대 왼쪽에 View 표시
.trailing	막대 오른쪽에 View 표시

• 그 밖에 .topLeading, .topTrailing, .bottomLeading, .bottomTrailing이 있습니다

여기서 View라고 적은 것을 눈치채셨겠지만, Text뿐만 아니라 VStack, HStack, Image 등도 사용할 수 있습니다.

2. 저는 막대 내부에 Text를 표시하려고 하니 .annotation(position: .overlay)를 사용하겠습니다.

.annotation(position: .overlay) {
	Text("\(data.weight, specifier: "%.1f")kg")
    	.font(.caption2)
        .bold()
        .foregroundStyle(Color.white)
}

• Text("(data.weight, specifier: "%.1f")kg") → Double 타입인 weight 값을 소수점 첫째 자리까지 표시
• .font(.caption2) → 작은 글씨(caption2)를 사용해 막대 내부에 잘 맞도록 조정
• .bold() → 텍스트를 볼드 처리
• .foregroundStyle(Color.white) → 텍스트 색상을 흰색으로 변경
• 기본 Text로 사용하면 막대그래프를 벗어날 수 있으니 위처럼 잘 조절해서 사용하면 좋습니다.

3. 코드를 합치면 아래와 같습니다.

import SwiftUI
import Charts

struct BarChartView: View {
    @State var tempDatas: [TempData] = []
    
    var body: some View {
        VStack {
            Chart {
                ForEach(tempDatas, id: \.date) { data in
                    BarMark(
                        x: .value("Date", data.dateStr),
                        y: .value("Weight", data.weight)
                    )
                    .foregroundStyle(Color.green)
                    .annotation(position: .overlay) {
                        VStack {
                            Text("\(data.weight, specifier: "%.1f")kg")
                                .font(.caption2)
                                .bold()
                                .foregroundStyle(Color.white)
                        }
                    }
                }
            }
        }
        .padding()
        .onAppear {
            let today = Date()
            let calendar = Calendar.current
            tempDatas = (0..<7).compactMap {
                if let date = calendar.date(byAdding: .day, value: -6 + $0, to: today) {
                    return TempData(date: date,
                             weight: Double.random(in: 60...80))
                }
                return nil
            }
        }
    }
}

struct TempData {
    let date: Date
    var dateStr: String {
        get {
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "MM-dd"
            
            return dateFormatter.string(from: self.date)
        }
    }
    let weight: Double
}

이제 BarMark 내부에 몸무게 값을 텍스트로 추가를 했습니다!
다음 게시글에는 막대 그래프의 드래그 기능을 알아보겠슴다.
감사합니다.