Hi I'm trying to apply clip shape on a BarMark with stacked values and the result is that it's applying the shape for each stack instead for the whole bar.
What I want to achieve:
What I got:
I noticed that corner radius is applied to the whole bar but just the top of it:
Is there any way to get this capsule shape when stacked?
My code is:
enum Value: Int, Hashable, CaseIterable {
case ftb
case nb
case remaining
var color: Color {
switch self {
case .ftb:
return .tint1
case .nb:
return .tint2
case .ramaining:
return .gray4
}
}
}
@ViewBuilder var barChart: some View {
Chart {
ForEach(dates, id: \.self) { date in
let incomeSummary = incomeSummaries.first(where: { $0.date?.inSameDay(as: date) == true })
ForEach(Value.allCases, id: \.self) { value in
barMark(for: value, date: date, incomeSummary: incomeSummary)
.foregroundStyle(value.color)
}
// .cornerRadius(20, style: .continuous)
// .clipShape(Capsule())
}
}
.chartXAxis {
AxisMarks(values: dates) { date in
AxisValueLabel(format: .dateTime.weekday(), centered: true)
}
}
.chartYAxis {
AxisMarks { mark in
AxisValueLabel()
}
}
}
private func barMark(for value: Value, date: Date, incomeSummary: IncomeSummary?) -> BarMark {
let amount = amount(for: value, in: incomeSummary)
return BarMark(x: .value("WeekDay",
date,
unit: .day,
calendar: Calendar.localTime),
y: .value("Income", amount))
}
Another issue, I've noticed that when AxisValueLabel is centered the last bar looses its label, is it a bug?