swift-charts

Swift Charts (SwiftUI)

Declarative charts for iOS/macOS. A Chart contains marks (each row of data → one mark); modifiers on the marks encode data into position/color/symbol; modifiers on the Chart control axes, scales, scrolling, and selection. Grounded in Apple's Charts framework.

• import Charts (plus SwiftUI). Base API iOS 16; selection & scrolling iOS 17; vectorized/function plots iOS 18; Chart3D/SurfacePlot iOS 26.
• Sibling skills: axis/value formatting → swift-formatstyle; Money/Decimal sources → kmp-money; observable view state → swiftui-observation; accessibility (audio graphs, labels) → accessibility-patterns; Android/Compose charts → jetpack-compose.

Contents

• Marks & the plotting model
• Encoding data: by-value styling
• Axes
• Scales & domains
• Annotations
• Selection (iOS 17)
• Scrolling (iOS 17)
• Pie / donut — SectorMark
• Vectorized & function plots (iOS 18)
• Chart3D & SurfacePlot (iOS 26)
• Fintech recipes
• Correctness checklist
• References: references/axes-scales.md, references/interaction.md, references/chart3d.md

Marks & the plotting model

One element in the data collection produces one mark. .value("Label", keyPath) binds a data field to a positional (or other) encoding; the "Label" names the axis/legend.

import SwiftUI
import Charts

struct DailySpend: Identifiable {
    let id = UUID()
    let day: Date
    let amount: Decimal
    let category: String
}

Chart(spend) { row in
    BarMark(
        x: .value("Day", row.day, unit: .day),   // date bins by calendar unit
        y: .value("Amount", row.amount)
    )
}

• Mark types: BarMark, LineMark, AreaMark, PointMark, RuleMark, RectangleMark, SectorMark (iOS 17).
• Positional values accept Plottable types: numbers, Date, String, and your own Plottable conformances. Decimal is not Plottable — map to Double at the encoding boundary (keep the Decimal as the source of truth; see fintech recipes).
• x: / y: can be a single .value(...) or a range .value(_,_ ) with two endpoints (e.g. BarMark(x:.value(...), yStart:.value(...), yEnd:.value(...)) for floating bars / candlestick-style hi-lo).
• Combine multiple mark statements in one Chart (e.g. LineMark + PointMark + RuleMark overlay). Order = z-order (later draws on top).
• Common per-mark modifiers: .foregroundStyle(_:), .opacity(_:), .lineStyle(StrokeStyle(...)), .interpolationMethod(.catmullRom | .linear | .monotone | .stepStart | ...), .symbol(_:), .symbolSize(_:), .cornerRadius(_:), .offset(...), .zIndex(_:), .mask { }.
• RuleMark(y: .value("Target", target)) draws a full-width reference line (threshold, average, budget). RuleMark(x:yStart:yEnd:) for a vertical segment.