Maximizing the use of Paths
By the end of this article, you will learn:
- How to use
- How to add an
- About parameters of
- How to Create a Pie Chart
- How to split segments in a Pie Chart
We will first draw our Pacman. Kidding, we will first try to draw a simple arc for our
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.
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
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.
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.
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.
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
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
By writing :
path.closeSubpath(), the code will now look like this:
The final code can be accessed from my GitHub repository:
I hope you understood how to create a segmented Pie Chart using SwiftUI. Do let me know if you have any queries or suggestions.