How to use hover annotation in Swift Charts

[onmyway133]

In this tutorial, we'll learn how to use Swift Charts to visualize ranking data.

We use default AxisMarks and AxisMarks to let Swift Charts interpolate x and y grid lines. For y axis, I want to have finer grain control over the grid, so I specify an arrayLiteral

Note that for rank, the lower value the better ranking, so we make use of chartYScale with reversed automatic domain to flip from 0 -> 100 to 100 -> 0

Finally, to handle hover, we place an invisible view Color.clear with onContinuousHover. Note that the x axis value are in Date values, so we need to cast to Date type

struct ContentView: View {
    @State private var selectedDate: Date?

    var body: some View {
        Chart {
            ForEach(items) { item in
                lineMark(for: item)
            }
        }
        .chartXAxisLabel("Last 30 days")
        .chartXAxis {
            AxisMarks()
        }
        .chartYAxisLabel("Rank")
        .chartYAxis {
            AxisMarks(values: .init(arrayLiteral: 1, 25, 50, 75, 100))
        }
        .chartYScale(domain: .automatic(reversed: true))
        .chartLegend(spacing: 16)
        .chartOverlay { proxy in
            Color.clear
                .onContinuousHover { phase in
                    switch phase {
                    case let .active(location):
                        selectedDate = proxy.value(atX: location.x, as: Date.self)
                    case .ended:
                        selectedDate = nil
                    }
                }
        }
    }
}

For our mark, we can move it to another method marked with @ChartContentBuilder. As we get hovered date value, we can find the item for that and place an annotation

@ChartContentBuilder
private func lineMark(for item: RankTrends.DailyItem) -> some ChartContent {
    LineMark(
        x: .value("Date", item.date),
        y: .value("Rank", item.rank)
    )
    .foregroundStyle(.purple.gradient)

    if let selectedDate,
       let item = items.first(where: { $0.date.isSameDay(date: selectedDate) }) {
        RectangleMark(
            x: .value("Date", selectedDate)
        )
        .foregroundStyle(Color.separator.opacity(0.1))
        .annotation {
            Text("\(item.rank)")
                .font(.callout)
        }
    }
}