Swift Charts

Build data visualizations with Swift Charts targeting iOS 26+. Compose marks inside a Chart container, configure axes and scales with view modifiers, and use vectorized plots for large datasets.

See references/charts-patterns.md for extended patterns, accessibility, and theming guidance.

Contents

• Workflow
• Chart Container
• Mark Types
• Axis Customization
• Scale Configuration
• Foreground Style and Encoding
• Selection (iOS 17+)
• Scrollable Charts (iOS 17+)
• Annotations
• Legend
• Vectorized Plots (iOS 18+)
• Common Mistakes
• Review Checklist
• References

Workflow

1. Build a new chart

1. Define data as an Identifiable struct or use id: key path.
2. Choose mark type(s): BarMark, LineMark, PointMark, AreaMark, RuleMark, RectangleMark, or SectorMark.
3. Wrap marks in a Chart container.
4. Encode visual channels: .foregroundStyle(by:), .symbol(by:), .lineStyle(by:).
5. Configure axes with .chartXAxis / .chartYAxis.
6. Set scale domains with .chartXScale(domain:) / .chartYScale(domain:).
7. Add selection, scrolling, or annotations as needed.
8. For 1000+ data points, use vectorized plots (BarPlot, LinePlot, etc.).

2. Review existing chart code

Run through the Review Checklist at the end of this file.

Chart Container

// Data-driven init (single-series)
Chart(sales) { item in
    BarMark(x: .value("Month", item.month), y: .value("Revenue", item.revenue))
}

// Content closure init (multi-series, mixed marks)
Chart {
    ForEach(seriesA) { item in
        LineMark(x: .value("Date", item.date), y: .value("Value", item.value))
            .foregroundStyle(.blue)
    }
    RuleMark(y: .value("Target", 500))
        .foregroundStyle(.red)
}

// Custom ID key path
Chart(data, id: \.category) { item in
    BarMark(x: .value("Category", item.category), y: .value("Count", item.count))
}

Mark Types

BarMark (iOS 16+)

// Vertical bar
BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))

// Stacked by category (automatic when same x maps to multiple bars)
BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))
    .foregroundStyle(by: .value("Product", item.product))

// Horizontal bar
BarMark(x: .value("Sales", item.sales), y: .value("Month", item.month))

// Interval bar (Gantt chart)
BarMark(
    xStart: .value("Start", item.start),
    xEnd: .value("End", item.end),
    y: .value("Task", item.task)
)

LineMark (iOS 16+)

// Single line
LineMark(x: .value("Date", item.date), y: .value("Price", item.price))

// Multi-series via foregroundStyle encoding
LineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))
    .foregroundStyle(by: .value("City", item.city))
    .interpolationMethod(.catmullRom)

// Multi-series with explicit series parameter
LineMark(
    x: .value("Date", item.date),
    y: .value("Price", item.price),
    series: .value("Ticker", item.ticker)
)

PointMark (iOS 16+)

PointMark(x: .value("Height", item.height), y: .value("Weight", item.weight))
    .foregroundStyle(by: .value("Species", item.species))
    .symbol(by: .value("Species", item.species))
    .symbolSize(100)

AreaMark (iOS 16+)

// Stacked area
AreaMark(x: .value("Date", item.date), y: .value("Sales", item.sales))
    .foregroundStyle(by: .value("Category", item.category))

// Range band
AreaMark(
    x: .value("Date", item.date),
    yStart: .v