swift-charts
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, Ar
By dpearson2699 · 3,463 installs
npx skills add dpearson2699/swift-ios-skills --skill swift-charts
Source repository · Upstream listing
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](references/charts patterns.md) for extended patterns, 3D charts, accessibility, and theming guidance.
Contents
[Workflow]( workflow)
[Chart Container]( chart container)
[Mark Types]( mark types)
[Axis Customization]( axis customization)
[Scale Configuration]( scale configuration)
[Foreground Style and Encoding]( foreground style and encoding)
[Selection (iOS 17+)]( selection ios 17)
[Scrollable Charts (iOS 17+)]( scrollable charts ios 17)
[Annotations]( annotations)
[Legend]( legend)
[Vectorized Plots (iOS 18+)]( vectorized plots ios 18)
[3D Charts (iOS 26+)]( 3d charts ios 26)
[Common Mistakes]( common mistakes)
[Review Checklist]( review checklist)
[References]( 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 , 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
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](references/charts patterns.md) for complete mixed series, theming, accessibility, and 3D recipes.
Mark Types
BarMark (iOS 16+)
LineMark (iOS 16+)
PointMark (iOS 16+)
AreaMark (iOS 16+)
RuleMark (iOS 16+)
RectangleMark (iOS 16+)
SectorMark (iOS 17+)
Use SectorMark for strictly positive values; filter, aggregate, or explain zero/negative values outside the pie or donut.
Axis Customization
Scale Configuration
Foreground Style and Encoding
Selection (iOS 17+)
Scrollable Charts (iOS 17+)
Annotations
Legend
Vectorized Plots (iOS 18+)
Use for large datasets (1000+ points). Accept entire collections or functions.
Apply KeyPath based modifiers before simple value modifiers:
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 .
Common Mistakes
1. Missing series parameter for multi line charts
2. Too many SectorMark slices
3. Missing scale domain when zero baseline matters
4. Static foregroundStyle overriding data encoding
5. Individual marks for 10,000+ data points
6. Fixed chart height breaking Dynamic Type
7. KeyPath modifier after value modifier on vectorized plots
8. Missing accessibility labels
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
Extended patterns: [references/charts patterns.md](references/charts patterns.md)
Apple docs: [Swift Charts](https://sosumi.ai/documentation/charts)
Apple docs: [Creating a chart using Swift Charts](https://sosumi.ai/documentation/charts/Creating a chart using Swift Charts)
Apple docs: [Swift Charts updates](https://sosumi.ai/documentation/updates/swiftcharts)
Apple docs: [Chart3D](https://sosumi.ai/documentation/charts/Chart3D)
Apple docs: [SurfacePlot](https://sosumi.ai/documentation/charts/SurfacePlot)