Canvas and Drawing in SwiftUI: Custom Graphics

Part 78 of 100 in the SwiftUI Zero to Expert Series

“Can we make the chart animate when it loads?” The question seemed simple enough.

I’d been using SwiftUI’s built-in shapes — circles, rectangles, rounded corners — for everything.

They worked fine for UI elements.

But my product manager wanted a custom bar chart with gradient fills, rounded tops, animated transitions, and value labels that floated above each bar.

I tried building it with stacked Rectangle views inside an HStack.

It worked, sort of.

But performance tanked with fifty bars.

The animation was choppy.

Adding gradients per bar meant fifty separate gradient calculations.

The view hierarchy was deep, and Instruments showed me exactly where the bottleneck was: too many views, too much layout computation.

Then I discovered Canvas.

Instead of fifty SwiftUI views composed together, I had one view that drew everything directly.

Performance went from stuttery to butter-smooth.

The bar chart rendered in a single pass — no layout engine, no view diffing, just immediate mode drawing at…