Pie and Donut Charts (SwiftUI)

SectorMark, added to Swift Charts after WWDC 23, plots pie and donut charts. One mark per slice, an angle for its share, and the usual mark modifiers for styling.

A Pie Chart

The required angle parameter takes a plottable value for the slice's portion, or a range with exact start and end angles. Color the slices with foregroundStyle(by:), which also produces the legend.

import Charts

struct Product: Identifiable {
    let id = UUID()
    let title: String
    let revenue: Double
}

Chart(products) { product in
    SectorMark(
        angle: .value(Text(verbatim: product.title), product.revenue)
    )
    .foregroundStyle(
        by: .value(Text(verbatim: product.title), product.title)
    )
}

Donut and Spacing

innerRadius hollows the pie into a donut. It accepts ratio, inset, and fixed sizes. angularInset adds spacing between the slices.

SectorMark(
    angle: .value(Text(verbatim: product.title), product.revenue),
    innerRadius: .ratio(0.6),
    angularInset: 8
)

SectorMark behaves like any other mark: the styling, annotation, and interaction modifiers that work on BarMark and LineMark apply to it unchanged.