recipe

chart-tooltip

chartXSelection + RuleMark annotation.

chart-tooltipchartselectionannotationguidance

On iPad

The same installed source at a regular width. It adapts its layout without a separate design.

Install

Nothing to install

Copy the snippet below. The native API is the whole treatment.

Usage

@State private var selectedMonth: String?

var selected: MonthlyBalance? {
    balances.first { $0.month == selectedMonth }
}

Chart {
    ForEach(balances) { row in
        BarMark(
            x: .value("Month", row.month),
            y: .value("Balance", row.amount)
        )
        .foregroundStyle(TintShapeStyle())
    }
    if let selected {
        RuleMark(x: .value("Month", selected.month))
            .foregroundStyle(.secondary)
            .annotation(position: .top) {
                Text(selected.amount, format: .currency(code: "KWD"))
                    .font(.footnote.monospacedDigit())
                    .padding(6)
                    .registrySurface()
            }
    }
}
.chartXSelection(value: $selectedMonth)
.registryChart()
.registryItem("chart-tooltip")

Why native is enough

chartXSelection binds mark's x type; tap/drag native. Adds RuleMark + top annotation on registry surface; only .registryChart() themes. Single-series needs explicit accent, else default color. Keep annotation short; type MUST match mark's x, or nothing selects.

Accessibility contract

Marks expose to VoiceOver via audio graph, value text.
Selected value: visible text, not color alone.

Details

Kind	recipe
Version	0.1.1
Platforms	iOS 26.0+
Dependencies	chart
Source	none (native guidance)