Create a Segmented Pie Chart Using SwiftUI

Maximizing the use of Paths

By the end of this article, you will learn:

• How to use Path
• How to add an Arc
• About parameters of Arc
• How to Create a Pie Chart
• How to split segments in a Pie Chart

Let’s Start

We will first draw our Pacman. Kidding, we will first try to draw a simple arc for our PieChart.

To draw a simple Arc, we will make use of Path and write the following code:

To draw an Arc, we must first set a starting point for our drawing path.
We do that by using move that sets the start point for our drawing path.

Now next, we will draw an Arc from that start point. For that, we will make use of addArc here you can see that addArc takes in a few parameters

• center - Specifies the center point of the circle (in the current coordinate system) used to define the arc
• radius - Specifies the radius of the circle used to define the arc
• startAngle - Specifies the starting angle of the arc (measured in radians)
• endAngle - Specifies the end angle of the arc (measured in radians)
• clockwise - The direction in which to draw the arc

After inputting the above code we can see something like the below.

Initial Arc

Fill Other Segments

Now that, you have understood how to use addArc you can easily create a pie chart with different segments.

To achieve a pie chart with different segments all we need is to overlay each new Arcs or keep each segment on top of the other. That can be done easily using ZStack .

We just need to create a few arcs with different start and end angles. In order to accommodate this change, we will add a few more Arcs and slightly modify the initial arc start angle to 150 degrees instead of 270 just for the appeal.

After adding the 3 new paths and modding our initial path our code will now look like the below.

Segment Splitted

Highlighting a Segment

In order to highlight a particular segment or move/isolate a particular segment from the pie chart, we need to apply offset a modifier to that particular segment.

Being a Manchester United fan, I will isolate the red segment from the Pie Chart. For that, I will put a negative offset value for the Red’s Path.

Now our Pie Chart will look something like the one below.

Offset Added

Detailing the Segments

We can do a lot of detailing on this Pie Chart. For making it look even more appealing I will give this a Title and am Offset Border so that the split segment will look even more highlighted.

In order to add a border, we will simply do a stroke and in order to give a Title we will create an Overlay for the path and add Text for the same as the below code.

But this shouldn't be done on an existing segment we will replicate the segment in which we need to be split with border colour. So the code will look like this now.

Border Added

Inspecting the code you can see that I have replicated the Red path. But in the first one where I have used, fill I have given the overlay with Text and in the second one where I have used the stroke I haven't given the overlay instead it has followed the same offset.

Here as you can see there is some problem that the stroke which we have to give isn't covering the bottom portion also. So how do we fix it?
We just simply need to tell the Path to close its Subpath .

By writing : path.closeSubpath(), the code will now look like this:

Final Output

The final code can be accessed from my GitHub repository:

GitHub - Nikilicious09/PieChart

I hope you understood how to create a segmented Pie Chart using SwiftUI. Do let me know if you have any queries or suggestions.