Build Pie Charts in SwiftUI
Create elegant charts in your iOS apps
In this article, I will explain how I created the beautiful Pie Chart shown above in SwiftUI. You can find this library on Github and add it to your project in XCode in one simple step. See https://github.com/ilamanov/SwiftPieChart.
The article consists of two sections:
- Creating the Pie Chart
- Creating the Table Showing Additional Information Below the Pie Chart
Creating the Pie Chart
A pie chart consists of a few slices. Let’s create a component to show one slice.
Create a new file PieSliceView.swift. Add the following PieSliceData data structure to it — this will be used to hold the data for the pie slice:
To render the pie slice we will use a Path. The Path needs two calls to render this slice. First, we need to move the cursor to the center of the screen, then we need to draw an arc. We will accomplish these with path.move() and path.addArc():
We calculated the center point using the width and height of our frame. We can get the width and height of our frame from the GeometryReader object. We take the smallest dimension of our frame and use that as the dimension of our chart (line 7 above) so that our chart is square and it fits into its frame. We also add aspectRatio() so our chart is centered vertically. We need the offset of 90 degrees (lines 17 and 18) because, in the SwiftUI coordinate system, the 0 degree starts at 3 o’clock instead of o’clock.
We can now test this slice rendering:
The result is this:
Let’s add text on top of this slice. We will use ZStack for this — we stack the text on top of our arc:
Calculating the position of the text (line 30 above) is tricky. First, we calculate the mid angle (the midpoint between start and end angles — line 4). Again we need an offset of Pi / 2 (90 degrees) to compensate for the difference in coordinate systems (0 degrees in SwiftUI is at 3 o’clock, but for our purposes 0 degrees is 12 o’clock).
The position of the text is then calculated using the formula below:
The result is a pie slice with text on top of it:
Now that we can render one slice of pie, let’s render a bunch of them and combine them into a pie chart.
Combining pie slices
Let’s create a new file for rendering the pie chart called PieChartView.swift.We will add two parameters for this view: values and colors which will indicate the values and colors for the pie slices.
We calculate slices (which is an array of PieSliceData) based on the provided values and colors. We calculate the span of each slice based on the value of that slice. The formula to calculate the span in degrees is degrees = 360 * value / sum where sum is the sum of all values (line 13). Based on the span, we calculate the start and end angles of all slices. We will use the slices array to pass in the required data to our PieSliceView from the previous section.
Now, let’s modify the body function of our view in order to draw our slices:
We use a ZStack to stack all slices and set the frame for all slices to be equal to the frame size of our PieChartView. We also add a backgroundColor parameter to our PieChartView so we can easily change the background. The result is shown below:
Now, let’s add some text in the center of the piechart. We first add a circle matching the background color, then add text on top of the circle:
We added another parameter called innerRadiusFraction (line 11) to control the radius of the inner circle. For now, we set the text in the center of the pie chart to be the sum of all values.
We can also make this text dynamic — displaying the value of the slice when you click on the slice. See https://github.com/ilamanov/SwiftPieChart for the implementation of dynamic text.
The result is below:
We are done with the most important part of our pie chart. We can also add cool animations when the user clicks individual slices, as shown below. See https://github.com/ilamanov/SwiftPieChart for the implementation of those effects.
Next, let’s add some additional information below our pie chart.
Creating the Table Showing Additional Information
Let’s add the following PieChartRows view to PieChartView.swift:
This view will look like this:
We can now render it within our PieChartView:
We wrapped our ZStack into a VStack and added PieChartRows below the ZStack. We also added another parameter names so that we can display names of categories in our chart.
And that’s it! Our Pie Chart is complete. The full code for PieChartView is shown below.
And the result is:
We did not add the hover effects to our pie chart but you can find the implementation of those effects in the Github repo for this Pie Chart: https://github.com/ilamanov/SwiftPieChart.
You can even add this repo as a library to your project directly from XCode — see the repo for instructions.
