Thank you so much for this solution, it led me in the right direction. However, that didn't work for me. I ended up putting another sectorMark directly on top of the original chart and extending the inner radius to 100% and the outer radius to about 150%. It's a weird solution, but it works amazingly, and the values change as the pie chart dynamically changes.
Chart(pieData) { data in
SectorMark(angle: .value("Pie Chart", data.categoryPercentage),
angularInset: 1.7)
.foregroundStyle(data.color)
.cornerRadius(5)
}
.frame(width: UIScreen.main.bounds.width - piePadding, height: UIScreen.main.bounds.width - piePadding)
.chartLegend(.hidden)
.chartOverlay { chartProxy in
GeometryReader { geometry in
let frame = geometry[chartProxy.plotAreaFrame]
ZStack {
Chart(pieData) { data in
SectorMark(angle: .value("Pie Chart", data.categoryPercentage),
innerRadius: .ratio(1),
outerRadius: .ratio(1.5),
angularInset: 1.7)
.foregroundStyle(by: .value("Category", data.category))
.cornerRadius(5)
.annotation(position: .overlay) {
Text("\(String(format: "%.2f", ((Double(data.categoryPercentage) / totalPercentage) * 100.0)))%,\n\(data.categoryPercentage) pts")
.bold()
.padding(.bottom, 250*sin(data.angle))
}
}
.chartLegend(.hidden)
}
.frame(width: UIScreen.main.bounds.width - piePadding + 75, height: UIScreen.main.bounds.width - piePadding + 75)
.position(x: frame.midX, y: frame.midY)
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: