SwiftUI When I use stroke in clipShape I got error - swiftui

Question

I edited my question. I shared full code.
I want to bend the end points of the semicircle as in the 1st image. How can I do that ? I tried this code but got an unrelated error.
How can I soften the corners of a half circle?
I created a customShape but I couldn't get the look I wanted.
.clipShape(
circle()
.trim(from: 0.5, to: 1)
.stroke(Color.red, style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
Error:
ChartData Container:
class ChartDataContainer : ObservableObject {
#Published var chartData =
[ChartData(color: Color(#colorLiteral(red: 1, green: 0.4932718873, blue: 0.4739984274, alpha: 1)), percent: 8, value: 0),
ChartData(color: Color(#colorLiteral(red: 1, green: 0.8323456645, blue: 0.4732058644, alpha: 1)), percent: 15, value: 0),
ChartData(color: Color(#colorLiteral(red: 0.4508578777, green: 0.9882974029, blue: 0.8376303315, alpha: 1)), percent: 32, value: 0),
ChartData(color: Color(#colorLiteral(red: 0.476841867, green: 0.5048075914, blue: 1, alpha: 1)), percent: 45, value: 0)]
func calc(){
var value : CGFloat = 0
for i in 0..<chartData.count {
value += chartData[i].percent
chartData[i].value = value
}
}
}
Custom Shape:
struct CustomShape: View {
var body: some View {
HalfCircle()
.stroke(.red, style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
.frame(width: 300, height: 300)
}
}
struct CustomShape_Previews: PreviewProvider {
static var previews: some View {
CustomShape()
}
}
struct HalfCircle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.height/2, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 180), clockwise: true)
return path
}
}
Code:
struct HalfDonutChart : View {
#ObservedObject var charDataObj = ChartDataContainer()
#State var indexOfTappedSlice = -1
var body: some View {
ZStack {
ZStack {
ForEach(0..<charDataObj.chartData.count) { index in
Circle()
.trim(from: 0.5, to: 1)
.trim(from: index == 0 ? 0.0 : charDataObj.chartData[index-1].value/100, to: charDataObj.chartData[index].value/100)
.stroke(charDataObj.chartData[index].color,lineWidth: 30)
.onTapGesture {
indexOfTappedSlice = indexOfTappedSlice == index ? -1 : index
}
.scaleEffect(index == indexOfTappedSlice ? 1.1 : 1.0)
.animation(.spring())
}
if indexOfTappedSlice != -1 {
Text(String(format: "%.2f", Double(charDataObj.chartData[indexOfTappedSlice].percent))+"%")
.font(.title)
}
}
.mask(
CustomShape()
)
.frame(width: 200, height: 250)
.padding()
.onAppear() {
self.charDataObj.calc()
}
}
}
}