Hi community, newbie here and decided to tackle an app with a big element using Shape. I have created a view which draws segments of a circle and puts them together into said circle. I am now trying to add text to each segment to label them (as they act as buttons). I have tried using simple attempts such as .overlay as well as searching forums for solutions such as this one: https://stackoverflow.com/questions/66187564/how-can-i-insert-uiimages-in-my-circle-segments-with-swiftui Unfortunately I am not able to get the label to sit over its respective segment. The code I am sharing removes all attempts at labelling to show its current state. Here is my code to draw the segmented wheel: struct EmotionWheelView: View { // Prepare array of emotions for the selector let emotions: [Emotion] = Bundle.main.decode("emotions.json") // Bringing in the tapped and selected emotions to set in the parent @Binding public var tappedEmotion: String @Binding public var selectedEmotion: String @Binding public var selectedSegment: Int? var selectableEmotions: [Emotion] { var results: [Emotion] = [] if selectedEmotion.isEmpty { for emotion in emotions { if emotion.level == 1 { results.append(emotion) } } } else { var baseEmotion: Emotion { var result: Emotion = emotions[0] for emotion in emotions { if emotion.name == selectedEmotion { result = emotion } } return result } for emotion in emotions { for subID in baseEmotion.subID { if emotion.id == subID { results.append(emotion) } } } } return results } var data: [Double] { var results: [Double] = [] for _ in selectableEmotions { results.append(2.0) } return results } var colors: [Color] { var results: [Color] = [] var color: Color = .red for emotion in selectableEmotions { switch emotion.color { case "purple": color = Color.purple case "pink": color = Color.pink case "orange": color = Color.orange case "yellow": color = Color.yellow case "green": color = Color.green case "teal": color = Color.teal case "blue": color = Color.blue default: color = Color.black } results.append(color) } return results } var body: some View { EmotionWheel(selectableEmotions: selectableEmotions, data: data, colors: colors, tappedEmotion: $tappedEmotion, selectedSegment: $selectedSegment) .frame(maxHeight: 200) } } struct EmotionWheel: View { var selectableEmotions: [Emotion] var data: [Double] var colors: [Color] @Binding var tappedEmotion: String @Binding var selectedSegment: Int? private var totalValue: Double { data.reduce(0, +) } private var startAngles: [Double] { var angles: [Double] = [] var currentAngle = -Double.pi / 2 for value in data { angles.append(currentAngle) currentAngle += value / totalValue * 2 * .pi } return angles } private var endAngles: [Double] { var angles: [Double] = [] var currentAngle = -Double.pi / 2 for value in data { currentAngle += value / totalValue * 2 * .pi angles.append(currentAngle) } return angles } var body: some View { GeometryReader { geo in ZStack { ForEach(0..<data.count, id: \.self) { index in WheelSegment(startAngle: startAngles[index], endAngle: endAngles[index]) .stroke(Color(UIColor.systemBackground), lineWidth: 1) .fill(colors[index].gradient) .onTapGesture { withAnimation { selectedSegment = index tappedEmotion = selectableEmotions[index].name } } .scaleEffect(selectedSegment == index ? 1.1 : 1.0) .animation(.spring(dampingFraction: 0.8), value: selectedSegment) } Circle() .foregroundStyle(Color(UIColor.systemBackground)) .frame(width: geo.size.width / 2) .overlay { Text(tappedEmotion) .fontWeight(.bold) .foregroundStyle(getTappedColor(tappedEmotion: tappedEmotion)) .padding() } } .padding(40) } } } struct WheelSegment: Shape { var startAngle: Double var endAngle: Double func path(in rect: CGRect) -> Path { var path = Path() let center = CGPoint(x: rect.midX, y: rect.midY) let radius = min(rect.width, rect.height) path.move(to: center) path.addArc(center: center, radius: radius, startAngle: Angle(radians: startAngle), endAngle: Angle(radians: endAngle), clockwise: false) path.closeSubpath() return path } } func getTappedColor(tappedEmotion: String) -> Color { let emotions: [Emotion] = Bundle.main.decode("emotions.json") var color: Color = .red var toColor: Emotion { for emotion in emotions { if emotion.name == tappedEmotion { return emotion } } return emotions[0] } switch toColor.color { case "purple": color = Color.purple case "pink": color = Color.pink case "orange": color = Color.orange case "yellow": color = Color.yellow case "green": color = Color.green case "teal": color = Color.teal case "blue": color = Color.blue default: color = Color.black } return color } Result: Crude representation of goal (you get the idea):