ios – Create a specific semi-arc (semi-donut-like) in SwiftUI (or Swift) with a label in between segments


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.

Semi-arc Doughnut Chart

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)
  }
}

Attempt with SwiftUI

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!

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img