I’ve 2 line charts in SwiftCharts that present the person’s time asleep and whole time in mattress. If you first see the chart, it seems regular, however if you click on on the totally different buttons (they’re NavigationLinks) a random curved line comes on the backside of it. It additionally seems when clicking on the toolbar gadgets.
The road chart is meant to look regular, however after urgent buttons, it makes a bizarre line. I’ve a chartXSelection which exhibits an annotation view, and when dragging via the chart, it disappears, however if you keep on the identical worth for a number of seconds, it seems once more (could not take a screenshot as a result of it disappears after transferring the mouse away)
That is my code, with the annotation view:
var physique: some View {
VStack {
NavigationLink(worth: selectedStat) {
HStack {
VStack(alignment: .main) {
Label("Time Asleep", systemImage: "mattress.double.fill")
.font(.title3.daring())
.foregroundStyle(.cyan)
Textual content("Avg: (formatTime(seconds: avgSleep, showDecimal: true))")
.font(.caption)
}
Spacer()
Picture(systemName: "chevron.proper")
}
}
.foregroundStyle(.secondary)
.padding(.backside, 12)
Chart {
if let selectedHealthMetric {
RuleMark(x: .worth("Chosen Metric", selectedHealthMetric.date, unit: .day))
.foregroundStyle(Coloration.secondary.opacity(0.3))
.offset(y: -10)
.annotation(place: .high,
spacing: 0,
overflowResolution: .init(x: .match(to: .chart), y: .disabled)) { annotationView }
}
RuleMark(y: .worth("Common", avgSleep))
.foregroundStyle(.mint)
.lineStyle(.init(lineWidth: 1, sprint: [5]))
ForEach(chartData) { sleep in
LineMark(
x: .worth("Day", sleep.date, unit: .day),
y: .worth("Time Asleep", sleep.worth)
)
.foregroundStyle(.cyan)
.interpolationMethod(.catmullRom)
.image(.circle)
AreaMark(
x: .worth("Day", sleep.date, unit: .day),
yStart: .worth("Worth", sleep.worth),
yEnd: .worth("Min Worth", minValue)
)
.foregroundStyle(Gradient(colours: [.cyan.opacity(0.5), .clear]))
.interpolationMethod(.catmullRom)
}
}
.body(top: 150)
.chartXSelection(worth: $rawSelectedDate.animation(.easeInOut))
.chartXAxis {
AxisMarks {
AxisValueLabel(format: .dateTime.month(.defaultDigits).day())
}
}
.chartYAxis {
AxisMarks { worth in
AxisGridLine()
.foregroundStyle(Coloration.secondary.opacity(0.3))
AxisValueLabel("(formatTime(seconds: worth.as(Double.self) ?? 0, showDecimal: true))")
}
}
.chartYScale(area: .computerized(includesZero: false))
}
.padding()
.background(RoundedRectangle(cornerRadius: 12).fill(Coloration(.secondarySystemBackground)))
}
var annotationView: some View {
VStack(alignment: .main) {
Textual content(selectedHealthMetric?.date ?? .now, format: .dateTime.weekday(.abbreviated).month(.abbreviated).day())
.font(.footnote.daring())
.foregroundStyle(.secondary)
Textual content(formatTime(seconds: selectedHealthMetric?.worth ?? 0))
.fontWeight(.heavy)
.foregroundStyle(.cyan)
}
.padding(12)
.background(
RoundedRectangle(cornerRadius: 4)
.fill(Coloration(.secondarySystemBackground))
.shadow(shade: .secondary.opacity(0.3), radius: 2, x: 2, y: 2)
)
}