As per title, I would like to know if there’s a way to achieve the image below with SwiftUI, and if not Swift would do.
There area a few details about this chart. What I’m really looking into is: a differently-colored, segmented semi-arc with a label in between segments after each color. These labels are the “threshold values”. Each segment can be different according to data.
We have like: blue threshold, orange-ish threshold and red threshold, with another value that will be the “live” one.
This is what I have so far, guys:
import SwiftUI
import Charts
struct Threshold: Identifiable {
let id = UUID()
let level: Int
let title: String
let threshold: Int
let color: Color
}
struct SectorChartExample: View {
@State private var thresholds: [Threshold] = [
.init(level: 0, title: "Idle", threshold: 350, color: Color(hex: "#57ADD9")),
.init(level: 1, title: "Active", threshold: 1000, color: Color(hex: "#F2A100")),
.init(level: 2, title: "Busy", threshold: 1500, color: Color(hex: "#CE2026")),
.init(level: 3, title: "Hidden", threshold: 2850, color: Color(.blue).opacity(0))
]
var body: some View {
Chart(thresholds) { threshold in
SectorMark(
angle: .value(
Text(verbatim: threshold.title),
threshold.threshold
),
innerRadius: .ratio(0.9),
angularInset: threshold.title == "Hidden" ? 0 : 5
)
.foregroundStyle(threshold.color)
.cornerRadius(20)
.annotation(position: .overlay) {
Text(threshold.title == "Hidden" ? "" : String(threshold.threshold))
.font(.system(size: 16))
.padding(0)
.rotationEffect(Angle(degrees: 90))
}.offset(x: 0)
}
.rotationEffect(Angle(degrees: -90))
.frame(height: 300)
}
}
To get the specific semi-arc I’m currently faking the remaining slice of this donut. I also tried three capsule elements but failed to trace the path in an arc-fashion. 🙁
Thanks for your help!