Make edges on graph line round and not "sharp" Swiftui - ios

Question

I am currently working on a graph view for a widget and I don't like the way the edges looks on my graph atm. I would like to make the edges on my graph line rounded instead of sharp (Graph).
I've tried with .cornerRadius(5) and .addQuadCurve() but nothing seems to work.
My code looks like this.
import SwiftUI
#available(iOS 14.0.0, *)
struct Graph: View {
var styling = ViewStyling()
var stockPrices: [CGFloat]
var body: some View {
ZStack {
LinearGradient(gradient:
Gradient(colors: [styling.gradientColor, styling.defaultWhite]), startPoint: .top, endPoint: .bottom)
.clipShape(LineGraph(dataPoints: stockPrices.normalized, closed: true))
LineGraph(dataPoints: stockPrices.normalized)
.stroke(styling.graphLine, lineWidth: 2)
//.cornerRadius(5)
}
}
}
#available(iOS 14.0.0, *)
struct LineGraph: Shape {
var dataPoints: [CGFloat]
var closed = false
func path(in rect: CGRect) -> Path {
func point(at ix: Int) -> CGPoint {
let point = dataPoints[ix]
let x = rect.width * CGFloat(ix) / CGFloat(dataPoints.count - 1)
let y = (1 - point) * rect.height
return CGPoint(x: x, y: y)
}
return Path { p in
guard dataPoints.count > 1 else { return }
let start = dataPoints[0]
p.move(to: CGPoint(x: 0, y: (1 - start) * rect.height))
//p.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.maxY), control: CGPoint(x: rect.maxX, y: rect.maxY))
for index in dataPoints.indices {
p.addLine(to: point(at: index))
}
if closed {
p.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
p.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
p.closeSubpath()
}
}
}
}
extension Array where Element == CGFloat {
// Return the elements of the sequence normalized.
var normalized: [CGFloat] {
if let min = self.min(), let max = self.max() {
return self.map{ ($0 - min) / (max - min) }
}
return []
}
}

Answer 1

How the joins between line segments are rendered is controlled by the lineJoin property of StrokeStyle, You're stroking with a color and a line width here:
.stroke(styling.graphLine, lineWidth: 2)
but you want something more like:
.stroke(styling.graphline, StrokeStyle(lineWidth: 2, lineJoin: .round))