Swift Charts

by dpearson26998d90fd121a26No license1.1K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 months ago

Implement, review, or improve data visualizations using Swift Charts. Use when building bar, line, area, point, pie, donut, or iOS 26 3D charts; when adding chart selection, scrolling, annotations, axes, scales, legends, or foregroundStyle grouping; when plotting functions with BarPlot, LinePlot, AreaPlot, PointPlot, Chart3D, or SurfacePlot; or when creating heat maps, Gantt charts, grouped bars, sparklines, threshold lines, or spatial visualizations.

Instructions onlySoftware DevelopmentData & Analytics
AI-generated overview

Guides implementing, reviewing, and improving Swift Charts data visualizations for iOS 26+.

What it does
This skill provides reference instructions and code patterns for building data visualizations with Apple's Swift Charts framework. It covers chart containers, mark types such as bars, lines, areas, points, sectors, and 3D surface plots, plus axes, scales, styling, selection, scrolling, annotations, legends, and vectorized plots. It also lists common mistakes and a review checklist for existing chart code. The deliverable is guidance and code examples rather than generated files.
When to use it
Use it when writing or reviewing Swift Charts code for iOS, including bar, line, area, point, pie, donut, or iOS 26 3D charts. It also fits work on chart selection, scrolling, annotations, axes, scales, legends, heat maps, Gantt charts, grouped bars, sparklines, threshold lines, or spatial visualizations.
Requirements
Requires an agent able to read the bundled reference file references/charts-patterns.md. The skill ships no scripts and needs no credentials; the referenced Apple documentation links imply optional network access.

Swift Charts

Build data visualizations with Swift Charts targeting iOS 26+. Compose marks inside Chart or Chart3D, configure axes and scales with view modifiers, and use vectorized plots or 3D plots when the data calls for them.

See references/charts-patterns.md [blocked] for extended patterns, 3D charts, accessibility, and theming guidance.

Contents

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, SectorMark, or SurfacePlot.
  3. Wrap 2D marks in Chart; use Chart3D only for real spatial or surface data.
  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+ 2D data points, use vectorized plots (BarPlot, LinePlot, etc.).
  9. Render representative empty, typical, dense, large-text, high-contrast, and VoiceOver states; exercise selection and scrolling when present.
  10. If an encoding, axis, selection, or accessibility check fails, restore the data fixture, fix one layer, and rerun the same matrix before adding decoration.

2. Review existing chart code

Identify the data semantics before judging mark choice. Then trace every value through mark, scale, axis, style, selection, and accessibility output; run the same validation matrix used for new charts.

Chart Container

swift
Chart(sales) { item in    BarMark(x: .value("Month", item.month), y: .value("Revenue", item.revenue))}

Use the data-driven initializer for a single collection. Use the content closure for mixed marks or multiple series, and pass id: when elements are not Identifiable. Load references/charts-patterns.md [blocked] for complete mixed-series, theming, accessibility, and 3D recipes.

Mark Types

BarMark (iOS 16+)

swift
// Vertical barBarMark(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 barBarMark(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+)

swift
// Single lineLineMark(x: .value("Date", item.date), y: .value("Price", item.price))
// Multi-series via foregroundStyle encodingLineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))    .foregroundStyle(by: .value("City", item.city))    .interpolationMethod(.catmullRom)
// Multi-series with explicit series parameterLineMark(    x: .value("Date", item.date),    y: .value("Price", item.price),    series: .value("Ticker", item.ticker))

PointMark (iOS 16+)

swift
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+)

swift
// Stacked areaAreaMark(x: .value("Date", item.date), y: .value("Sales", item.sales))    .foregroundStyle(by: .value("Category", item.category))
// Range bandAreaMark(    x: .value("Date", item.date),    yStart: .value("Min", item.min),    yEnd: .value("Max", item.max)).opacity(0.3)

RuleMark (iOS 16+)

swift
RuleMark(y: .value("Target", 9000))    .foregroundStyle(.red)    .lineStyle(StrokeStyle(dash: [5, 3]))    .annotation(position: .top, alignment: .leading) {        Text("Target").font(.caption).foregroundStyle(.red)    }

RectangleMark (iOS 16+)

swift
RectangleMark(x: .value("Hour", item.hour), y: .value("Day", item.day))    .foregroundStyle(by: .value("Intensity", item.intensity))

SectorMark (iOS 17+)

Use SectorMark for strictly positive values; filter, aggregate, or explain zero/negative values outside the pie or donut.

swift
// Pie chartChart(data, id: \.name) { item in    SectorMark(angle: .value("Sales", item.sales))        .foregroundStyle(by: .value("Category", item.name))}
// Donut chartChart(data, id: \.name) { item in    SectorMark(        angle: .value("Sales", item.sales),        innerRadius: .ratio(0.618),        outerRadius: .inset(10),        angularInset: 1    )    .cornerRadius(4)    .foregroundStyle(by: .value("Category", item.name))}

Axis Customization

swift
// Hide axes.chartXAxis(.hidden).chartYAxis(.hidden)
// Custom axis content.chartXAxis {    AxisMarks(values: .stride(by: .month)) { value in        AxisGridLine()        AxisTick()        AxisValueLabel(format: .dateTime.month(.abbreviated))    }}
// Multiple AxisMarks compositions (different intervals for grid vs. labels).chartXAxis {    AxisMarks(values: .stride(by: .day)) { _ in AxisGridLine() }    AxisMarks(values: .stride(by: .week)) { _ in        AxisTick()        AxisValueLabel(format: .dateTime.week())    }}
// Axis labels (titles).chartXAxisLabel("Time", position: .bottom, alignment: .center).chartYAxisLabel("Revenue ($)", position: .leading, alignment: .center)

Scale Configuration

swift
.chartYScale(domain: 0...100)                          // Explicit numeric domain.chartYScale(domain: .automatic(includesZero: true))   // Include zero.chartYScale(domain: 1...10000, type: .log)            // Logarithmic scale.chartXScale(domain: ["Mon", "Tue", "Wed", "Thu"])     // Categorical ordering

Foreground Style and Encoding

swift
BarMark(...).foregroundStyle(.blue)                                    // Static colorBarMark(...).foregroundStyle(by: .value("Category", item.category))   // Data encodingAreaMark(...).foregroundStyle(                                         // Gradient    .linearGradient(colors: [.blue, .cyan], startPoint: .bottom, endPoint: .top))

Selection (iOS 17+)

swift
@State private var selectedDate: Date?@State private var selectedRange: ClosedRange<Date>?@State private var selectedAngle: Double?
// Point selectionChart(data) { item in    LineMark(x: .value("Date", item.date), y: .value("Value", item.value))}.chartXSelection(value: $selectedDate)
// Range selection.chartXSelection(range: $selectedRange)
// Angular selection binds the plottable angle value; derive the category from ranges..chartAngleSelection(value: $selectedAngle)

Scrollable Charts (iOS 17+)

swift
Chart(dailyData) { item in    BarMark(x: .value("Date", item.date, unit: .day), y: .value("Steps", item.steps))}.chartScrollableAxes(.horizontal).chartXVisibleDomain(length: 3600 * 24 * 7) // 7 days visible.chartScrollPosition(initialX: latestDate).chartScrollTargetBehavior(    .valueAligned(matching: DateComponents(hour: 0), majorAlignment: .page))

Annotations

swift
BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))    .annotation(position: .top, alignment: .center, spacing: 4) {        Text("\(item.sales, format: .number)").font(.caption2)    }
// Overflow resolution.annotation(    position: .top,    overflowResolution: .init(x: .fit(to: .chart), y: .padScale)) { Text("Label") }

Legend

swift
.chartLegend(.hidden)                                           // Hide.chartLegend(position: .bottom, alignment: .center, spacing: 10) // Position.chartLegend(position: .bottom) {                                // Custom    HStack {        ForEach(categories, id: \.self) { cat in            Label(cat, systemImage: "circle.fill").font(.caption)        }    }}

Vectorized Plots (iOS 18+)

Use for large datasets (1000+ points). Accept entire collections or functions.

swift
// Data-drivenChart {    BarPlot(sales, x: .value("Month", \.month), y: .value("Revenue", \.revenue))        .foregroundStyle(\.barColor)}
// Function plotting: y = f(x)Chart {    LinePlot(x: "x", y: "y", domain: -5...5) { x in sin(x) }}
// Parametric: (x, y) = f(t)Chart {    LinePlot(x: "x", y: "y", t: "t", domain: 0...(2 * .pi)) { t in        (x: cos(t), y: sin(t))    }}

Apply KeyPath-based modifiers before simple-value modifiers:

swift
BarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .foregroundStyle(\.color)    // KeyPath first    .opacity(0.8)                // Value modifier second

3D Charts (iOS 26+)

Use Chart3D for spatial data or bivariate surfaces, not as a decorative replacement for ordinary 2D categorical or time-series charts. Chart3D accepts SurfacePlot plus 3D initializers of PointMark, RuleMark, and RectangleMark.

swift
@State private var pose: Chart3DPose = .default
Chart3D {    SurfacePlot(x: "x", y: "y", z: "z") { x, z in        sin(2 * x) * cos(2 * z)    }    .foregroundStyle(.heightBased)}.chartXScale(domain: -2...2).chartYScale(domain: -1...1).chartZScale(domain: -2...2).chart3DPose($pose)

Common Mistakes

1. Missing series parameter for multi-line charts

swift
// WRONG -- all points connect into one lineChart {    ForEach(allCities) { item in        LineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))    }}
// CORRECT -- separate lines per cityChart {    ForEach(allCities) { item in        LineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))            .foregroundStyle(by: .value("City", item.city))    }}

2. Too many SectorMark slices

swift
// WRONG -- 20 tiny sectors are unreadableChart(twentyCategories, id: \.name) { item in    SectorMark(angle: .value("Value", item.value))}
// CORRECT -- group into top 5 + "Other"Chart(groupedData, id: \.name) { item in    SectorMark(angle: .value("Value", item.value))        .foregroundStyle(by: .value("Category", item.name))}

3. Missing scale domain when zero-baseline matters

swift
// WRONG -- axis starts at ~95; small changes look dramaticChart(data) {    LineMark(x: .value("Day", $0.day), y: .value("Score", $0.score))}
// CORRECT -- explicit domain for honest representationChart(data) {    LineMark(x: .value("Day", $0.day), y: .value("Score", $0.score))}.chartYScale(domain: 0...100)

4. Static foregroundStyle overriding data encoding

swift
// WRONG -- static color overrides by-value encodingBarMark(x: .value("X", item.x), y: .value("Y", item.y))    .foregroundStyle(by: .value("Category", item.category))    .foregroundStyle(.blue)
// CORRECT -- use only the data encodingBarMark(x: .value("X", item.x), y: .value("Y", item.y))    .foregroundStyle(by: .value("Category", item.category))

5. Individual marks for 10,000+ data points

swift
// WRONG -- creates 10,000 mark views; slowChart(largeDataset) { item in    PointMark(x: .value("X", item.x), y: .value("Y", item.y))}
// CORRECT -- vectorized plot (iOS 18+)Chart {    PointPlot(largeDataset, x: .value("X", \.x), y: .value("Y", \.y))}

6. Fixed chart height breaking Dynamic Type

swift
// WRONG -- clips axis labels at large text sizesChart(data) { ... }    .frame(height: 200)
// CORRECT -- adaptive sizingChart(data) { ... }    .frame(minHeight: 200, maxHeight: 400)

7. KeyPath modifier after value modifier on vectorized plots

swift
// WRONG -- compiler errorBarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .opacity(0.8)    .foregroundStyle(\.color)
// CORRECT -- KeyPath modifiers firstBarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .foregroundStyle(\.color)    .opacity(0.8)

8. Missing accessibility labels

swift
// WRONG -- VoiceOver users get no contextChart(data) {    BarMark(x: .value("Month", $0.month), y: .value("Sales", $0.sales))}
// CORRECT -- add per-mark accessibilityChart(data) { item in    BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))        .accessibilityLabel("\(item.month)")        .accessibilityValue("\(item.sales) units sold")}

9. Treating angle selection as category selection

chartAngleSelection(value:) binds the selected plottable angle value. For pie and donut charts, map that numeric value through cumulative sector ranges before comparing it to a category label.

Review Checklist

  • Data model uses Identifiable or chart uses id: key path
  • Mark type matches goal (bar=comparison, line=trend, sector=proportion)
  • Multi-series lines use series: parameter or .foregroundStyle(by:)
  • Axes configured with appropriate labels, ticks, and grid lines
  • Scale domain set explicitly when zero-baseline matters
  • Pie/donut uses positive values, 5-7 sectors, and "Other" grouping
  • Selection binding type matches axis data type (Date? for date axis)
  • Pie/donut angle selection maps numeric angle values back to categories
  • Scrollable charts set .chartXVisibleDomain(length:) for viewport
  • Vectorized plots used for datasets exceeding 1000 points
  • KeyPath modifiers applied before value modifiers on vectorized plots
  • Chart3D used only for real 3D data or surfaces, with z scale and pose reviewed
  • Accessibility labels added to marks for VoiceOver
  • Chart tested with Dynamic Type and Dark Mode
  • Legend visible and positioned, or intentionally hidden
  • Ensure chart data model types are Sendable; update chart data on @MainActor

References

Source and attribution

Source:dpearson2699/swift-ios-skillsinskills/swift-chartsat commit8d90fd1

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from dpearson2699/swift-ios-skills

Widgetkit

dpearson2699

Guides implementing, reviewing, and improving WidgetKit widgets and controls for iOS, iPadOS, watchOS, and CarPlay.

Software Development1.1Kupdated 2 months ago

Weatherkit

dpearson2699

Guides iOS developers in fetching WeatherKit forecasts, alerts, and attribution using WeatherService.

Software Development1.1Kupdated 2 months ago

Vision Framework

dpearson2699

Implement computer vision features including text recognition (OCR), face detection, barcode scanning, image segmentation, object tracking, and document scanning in iOS apps. Covers both the modern Swift-native Vision API (iOS 18+) and legacy VNRequest patterns, VisionKit DataScannerViewController for live camera scanning, and CoreMLRequest/VNCoreMLRequest for custom model inference. Use when adding OCR, barcode scanning, face detection, or custom Core ML model inference with Vision.

Awaiting classification1.1Kupdated 2 months ago

Tipkit

dpearson2699

Implement and review Apple TipKit feature-discovery UI for iOS 17+ apps. Use when adding or auditing in-app tips, contextual help, coach marks, Tip, TipView, popoverTip, rules, events, actions, display frequency, testing overrides, reusable tip identifiers, or iOS 18+ TipGroup and CloudKit tip sync; avoid for generic SwiftUI navigation or layout outside tip presentation.

Awaiting classification1.1Kupdated 2 months ago

Tabletopkit

dpearson2699

Guides building multiplayer spatial board games on visionOS with Apple's TabletopKit and RealityKit.

Software Development1.1Kupdated 2 months ago

Swiftui Webkit

dpearson2699

Guides embedding and controlling web content in SwiftUI apps with WebKit for SwiftUI on iOS 26 and later.

Software Development1.1Kupdated 2 months ago

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago
Swift Charts Agent Skill | SourceWeft