Create a simple pie chart with SwiftUI

Display data in pie chart the easiest way

When we want to display statistical information, it is better to display data in graphic forms like charts and graphs. Pie chart is the most common of these because it is simple and easy to understand. You can compare data, analyze information very quickly, and emphasize your points easily by using different colors to highlight a slide in the chart. But this article is not talking about pros and cons of pie chart or when to use it, it is about helping you create a pie chart in SwiftUI

Drawing each slide then the whole pie

To begin, create a brand new SwiftUI project, then create a new file called DataItem.swift this object is to keep each piece of information (one slide) that we have to display in the chart (the whole pie)

DataItem.swift

So, based on this data, we have to create data for each slide in the chart called SlideData.swift

SlideData.

• Identifiable so we can loop through the array of data to create the whole pie
• ObservableObject because this object is the data that we use to create each slide view (just in case we have to get in from the APIs)

From here, we have to create data for the whole pie calledPieChartData.swift, in this file, we will generate data for the whole pie from and array of double values, or from an array of SlideData

PieChartData.swift

To explain the code used to calculate data for each slide a bit: the screen coordinates on mobile is like in the picture below, (0,0) is the top left corner, the first slide usually starts at -90°, so the first slide has the angle of -90°+ α, the second slide (red) has the angle of -90°+ α + β and so on

x-y axis on device

From the data of each slide, we can draw the slide view of the pie chart by creating a Path starting from the center of the pie chart view calculated by geometry proxy combined with arc’s angle from the startAngle to the endAngle

PieChartSlide.swift

Then create the whole pie chart

PieChart.swift

Adding annotation label for each slide

So if I want to add annotation label (for example 8%) to the red slide at the red dot (at 0.7 radius from the center of the circle). It’s just pure math calculation here. First I will find the center point on the slide arc, which is (𝑥0, y0), by using trigonometric functions for provided data (alpha, and radius). And to make it simple, I just do it for the first quadrant, because when the arc center point is on different quadrant, its coordinate is just a combination of ±𝑥0 and ±y0. Then, the coordinate for the annotation label of this slide will be (0.7𝑥0, 0.7y0)

x-y axis in Math

You can also use this concept to move one or a few slides a little bit farther from the center of the pie to emphasize that piece of data (like the 3rd pie chart in the top image)

Animation

Add a small animation when displaying the chart will make it more friendly and more eye-catching, here I use spring animation, combining with the index of the slide to make each slide appear a little bit later than the previous one.

Now, you can create a nice pie chart to display data in your application, but sometimes, it’s better to use different type of charts/graphs (bar graph for example), I will save that for another article.

You can find the complete source code for this article here
https://github.com/kentwinder/SwiftUI-PieChart