SwiftUI charts and data components
Interactive charts you scrub with a finger, a donut chart, a rolling number counter and KPI tiles with live sparklines.
About these pieces
One self-contained Swift file each, Apple frameworks only, from iOS 17.
Scrub Chart is a line or bar chart with a readout, a flag that rides the scrub rule, hold-and-drag range selection with delta and percent, and a range picker that morphs the line between datasets. Ring Breakdown is a donut chart you scrub around, with a haptic at each slice boundary and legend rows that light up with the slice.
Odometer rolls each digit on its own slot like a mechanical counter, carrying from the low digits up so unchanged digits never move. Live Stat is a metric tile whose value rolls with a spring, with a sparkline you hold and scrub.
Learn the technique: SwiftUI animations guide.
Questions
How the pieces work, and how to build the same thing yourself. Every piece's page has its full notes.
Should I use Swift Charts or a custom chart?
Swift Charts is the right default for standard plots. These pieces are for the interaction around a chart that finance and health apps need: scrubbing, range selection, morphing datasets and haptic slice boundaries.
How do I animate a number counting up in SwiftUI?
For simple cases use contentTransition(.numericText()) with withAnimation. For a mechanical roll where only changed digits move, lay out each digit as its own vertical strip and offset it, which is what Odometer does.
Keep browsing
Nearby collections, then every category in the library.
- FeedbackReactions, ratings, status morphs, skeletons and outcomes.5
- Buttons and controlsButtons and dials with press depth, hold, drag and outcome states.5
- AnimationsSprings, gesture physics, transitions and morphs, across every category.16
- TextType that reveals, expands and renders as glass.3
- BackgroundsQuiet atmospheres: a Metal silk shader and a touch-reactive dot grid.2
- Liquid GlassCorrect iOS 26 Liquid Glass with Material fallbacks.3
- Inputs and formsTracks, steppers, rails and fields built for the thumb.9
- CardsCards with depth, motion, parallax and gesture-driven stacks.4
- ListsRows and carousels with swipe, depth and completion physics.5
- NavigationFloating docks, tracking tabs and stretchy headers.3
- SheetsToasts, confirmations and permission moments.3
- MotionGesture modifiers with real physics.1
- AIStreaming replies, thinking states, prompt chips and code.6
- MediaPhoto viewing and story playback.2
- HapticsPieces that tick, tap and confirm at the moment that matters.19
Ready to build something better?
55 pieces, one file each, yours to keep. Start with the library or see what the whole app looks like.