Donut Charts in SwiftUI

Learn how to make Donuts Pie Charts in SwiftUI

Google Logo

Pie charts are a great way to visualize data in a clear and intuitive way. Let’s look at how we can build a simple donut chart in SwiftUI.

Setting up the Project

Open Xcode and create a new project. Choose the “App” template and set the interface to “SwiftUI”. Name your project whatever you like and click “Create”.

Creating the Pie Chart View

In the ContentView.swift file, create a new struct called PieChartView. This will be the view that displays the pie chart.

struct PieChartView: View {
    var body: some View {
        Text("Pie Chart View")
    }
}

This is just a simple placeholder view that we’ll replace with our actual pie chart.

Adding the Data

Before we can create the pie chart, we need some data to display. For this example, we’ll use an array of percentages. Add the following code to the PieChartView struct:

let data: [Double] = [0.20, 0.35, 0.45]

This array represents three “slices” of the pie chart, with percentages of 20%, 30%, and 50%, respectively.

Drawing the Pie Chart