Linking Animations Together to Build Bar Charts in SwiftUI
By: Mark Lucking
Tags: Animation, Mobile, iOS, Swift, Programming

Linking Animations Together to Build Bar Charts in SwiftUI

Bar charting in SwiftUI 2

A native SwiftUI bar chart. Animation by the author.

If you compare UIKit to SwiftUI, you’re still going to find quite a few areas in which the former is — some would say — leagues ahead of the latter. Indeed, developer Daniel Cohen Gindi is a man who would surely agree with such a sentiment. He developed a package called Charts under UIKit that has become a standard in its own right. It is a package that helps you create eight different types of charts, pies, and graphs and indeed apply a lot of customisation to them, including some stunning animations.

As excellent as it is — and implementable in SwiftUI, I believe, using UIRepresentable — I thought it would be a more interesting exercise to try to re-develop it natively. At least a very small part of it. By doing so, we can start to appreciate a little more some of the areas where SwiftUI remains a work in progress.

Let’s begin with some simple code to build a bar chart. Something like this:

Simple native SwiftUI bar chart.

The code behind this picture is shown below. In a nutshell, it is simply a collection of different-coloured rectangles with labels aligned on the base of an HStack that it sits within:

Bar chart code

It’s a good start, but there are three problems that I hope are jumping out at you:

The data is all held within the view itself.

The colours of the bars are linked to the data set (as in, fixed).

It could be a lot more interesting — animation, anyone?

Let’s try to address those challenges. Let’s do the animation first. How difficult could it be… right? Wrong.

Animated bar chart.

The code below illustrates how I did it. I am using threads to link the animation frames together, showing one of the major missing links for me still in SwiftUI —an obvious means of timing/linking animations. It almost works, if you forgive the number sliding down when the first bar appears. It also illustrates a second area that many app developers are finding challenging in SwiftUI layout. I wrote a piece about layout with SwiftUI a few months ago.

I know what you’re thinking: The animation is OK, but it’s a bit red, isn’t it? You’ll find the answer to the next challenge in this article on colour. Let’s add a function to our drawBar view using HSB values to address our colouring challenge:

This will give us back some color:

Bar chart with auto-generated colours.

Of course, you can play around with it a little. Here’s another version that uses a different calculation to get to a different-coloured set. I think I prefer it, in fact. This is the function you see on the lead image:

Bar chart with auto-generated colours.

Note: I slipped the jump value into the parameter list of drawBar to make this work. And I cheated (again) by using the magic number 7, which is the number of bars.

You’re more than welcome to come up with your own versions. Why not have a go?

This leaves us with the last challenge to solve — a challenge I already answered in this article on setting values. I’m going to use an observable object (option 5) to solve this. The idea will be to feed in different values over time, so I get a bar chart that animates multiple sets that you supply externally. Putting it all together, we end up with this, which is almost as good as charts… although don’t tell David I said that:

A SwiftUI native animated bar chart.

Looks familiar, no? Now for the final part: an animated bar chart using an auto-generated colour scheme. A bar chart I reload again and again in this GIF with a tap gesture. Here is the final code behind the GIF you’re looking at. It’s a superset of the code already presented. The colour scheme is linked to the bar number — not the value:

This brings me to the end of the article. I will look at doing something similar with some other types of charts in the coming days. Stay tuned.

Keep calm, keep coding.