Apple introduced SwiftUI in 2019 as a lightweight and easy-to-use way to create user interfaces. This article is the third in a series that explores how the SwiftUI framework can help us build clean, simple, and stunning data visualization tools. This time, we take a look at how to make pie charts!
What Is A Pie Chart?
A Pie Chart, also known as a Circle Chart, is a data visualization that represents each data value as a proportionally sized slice of a circle. Like Bar Charts, they deal with categorical data and are an excellent tool to use if the ratio between different categories is essential to convey.
This type of visualization might be appropriate when you are:
- Visualizing how much of the annual budget goes into each department at your company.
- Trying to get a sense of how your monthly salary splits between paying rent, paying for food, and buying educational books covering SwiftUI.
- Drawing up the proportion of rental apartments and condos in different areas of your city.
What Do We Need?
To make a Pie Chart, we need SwiftUI’s Path, Shape, and ZStack types. Since we covered all of these in previous articles in this series, we jump straight into the implementation. Let’s go!
How Do We Code This Thing?
Let’s start by looking at the main component, namely the PieChart struct.
This struct contains quite a few helper functions, some of them doing some math that may look scary at first glance, but we’ll go over it all.
Since we represent our data as circle sectors, we need to compute each of their start and end angles. We use the startAngle(for:) and endAngle(for:) methods for these tasks, and they return their values in radians.
The method textOffset(for:in:) method looks more complex. However, in reality, it is quite similar to the angle methods. Its task is to compute a point in our circle where we can place labels that describe what the different circle sectors represent. These computations have two properties that are worth mentioning:
- They place the labels at two-thirds of the way between the center of the circle and the circumference.
- They place the labels at an angle located at the center of their associated circle sector.
Now, let’s look at the body property and see how it’s structured. The hierarchy starts by wrapping all of our content in a GeometryReader. This component provides access to information about the containing rectangle, which we need to place our labels properly.
Inside of the GeometryReader is a ZStack, which allows us to place several components on top of each other. The ZStack hosts a ForEach view, which in turn creates PieSlice components and PieSliceText‘s for all of our data points. Note that the ForEach instantiates two PieSlice objects per run. At the time of writing, SwiftUI does not provide a nice way to stroke and fill a single Shape, forcing us to create two objects – one to fill and one to use as an outline.
One last thing to note is that we specify the Z index of our PieSliceText‘s to make sure that they render on top of any other component.
Drawing the Data
The PieChart view does a lot of the heavy lifting in terms of computing angles and positions for all enclosed components. Thanks to this, implementing the PieSlice Shape and the PieSliceText labels is a cakewalk. Have a look at the code for PieSlice.
PieSlice takes a start angle and an end angle as parameters on instantiation. With the help of trigonometry, it draws a circle sector that fits between those angles. There’s nothing fancy going on here – just regular old right-angle-triangle-math.
The last thing to inspect is the PieSliceText component. Its only job is to stack two text labels on top of each other – a task it performs with impeccable precision.
Putting It All Together
The PieChart view that we put together in this article is ready to be used as-is. All you have to do is copy the files into your project and instantiate a new object. Feel free to experiment with the components, add new ones, and give the chart your own personal touch. I can’t wait to see what you do create with this!
Are you interested in learning more about software development and Data Science? Follow me to get notifications when I post new articles.
Until next time, you can read the first and second article in this series:
Or you could review a few guidelines for how to solve complex problems:
