At the moment, right here is my supply code and screenshot of the pattern app I am doing. My solely concern is how can I present the purple tick outdoors the border on the backside half?
VStack(alignment: .main) {
Chart {
ForEach(chartData, id: .id) { merchandise in
LineMark(
x: .worth("Beat", merchandise.beat),
y: .worth("Worth", merchandise.worth)
)
.foregroundStyle(merchandise.sort.coloration.opacity(lineVisibility[item.type]!))
.foregroundStyle(by: .worth("Plot", merchandise.sort))
.lineStyle(.init(lineWidth: 2))
}
}
.border(.black, width: 2)
.chartLegend(.hidden)
.chartYAxis(.hidden)
.chartXAxis {
AxisMarks(values: .automated(desiredCount: numberOfBeats, roundLowerBound: true, roundUpperBound: true)) { _ in
AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Shade.grey)
AxisTick(centered: true, size: 20, stroke: .init(lineWidth: 1))
.foregroundStyle(Shade.purple)
}
}
.padding(.trailing, 15)
HStack {
Textual content("0 beat")
.padding(.main, -15)
Spacer()
Textual content("(numberOfBeats) beat")
}
}
.body(minWidth: GENERAL_WIDTH * 2)
.padding(.trailing, 10)