I tried collisionResolution as truncate in AxisValueLabel. As documented in apple, Truncate a label to the space available to it but it’s not working.
<code>import Charts
import SwiftUI
struct YAxisLabel: View {
let workoutData = [
(workoutType: "Walk", data: Workout.walkWorkout),
(workoutType: "Run", data: Workout.runWorkout)
]
var body: some View {
VStack {
Chart {
ForEach(workoutData, id: .workoutType) { element in
ForEach(element.data) {
BarMark(
x: .value("Day", $0.day),
y: .value("Workout(in minutes)", $0.minutes)
)
}
.foregroundStyle(by: .value("Workout(type)", element.workoutType))
.position(by: .value("Workout(type)", element.workoutType)) // Asif - this craetes grouped
}
}
.frame(height: 200)
.chartYAxis {
AxisMarks(position: .leading) {
axis in
AxisGridLine()
AxisValueLabel(
centered: true,
collisionResolution: .truncate,
orientation: AxisValueLabelOrientation.verticalReversed
) {
Text("(axis.index * 25) minutes")
}
}
}
}
.padding()
}
}
struct Workout: Identifiable {
let id = UUID()
let day: String
let minutes: Int
}
extension Workout {
static let walkWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 23),
.init(day: "Tue", minutes: 35),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 30),
.init(day: "Fri", minutes: 15),
.init(day: "Sat", minutes: 65),
.init(day: "Sun", minutes: 81),
]
static let runWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 16),
.init(day: "Tue", minutes: 12),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 34),
.init(day: "Fri", minutes: 22),
.init(day: "Sat", minutes: 43),
.init(day: "Sun", minutes: 90),
]
}
</code>
<code>import Charts
import SwiftUI
struct YAxisLabel: View {
let workoutData = [
(workoutType: "Walk", data: Workout.walkWorkout),
(workoutType: "Run", data: Workout.runWorkout)
]
var body: some View {
VStack {
Chart {
ForEach(workoutData, id: .workoutType) { element in
ForEach(element.data) {
BarMark(
x: .value("Day", $0.day),
y: .value("Workout(in minutes)", $0.minutes)
)
}
.foregroundStyle(by: .value("Workout(type)", element.workoutType))
.position(by: .value("Workout(type)", element.workoutType)) // Asif - this craetes grouped
}
}
.frame(height: 200)
.chartYAxis {
AxisMarks(position: .leading) {
axis in
AxisGridLine()
AxisValueLabel(
centered: true,
collisionResolution: .truncate,
orientation: AxisValueLabelOrientation.verticalReversed
) {
Text("(axis.index * 25) minutes")
}
}
}
}
.padding()
}
}
struct Workout: Identifiable {
let id = UUID()
let day: String
let minutes: Int
}
extension Workout {
static let walkWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 23),
.init(day: "Tue", minutes: 35),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 30),
.init(day: "Fri", minutes: 15),
.init(day: "Sat", minutes: 65),
.init(day: "Sun", minutes: 81),
]
static let runWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 16),
.init(day: "Tue", minutes: 12),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 34),
.init(day: "Fri", minutes: 22),
.init(day: "Sat", minutes: 43),
.init(day: "Sun", minutes: 90),
]
}
</code>
import Charts
import SwiftUI
struct YAxisLabel: View {
let workoutData = [
(workoutType: "Walk", data: Workout.walkWorkout),
(workoutType: "Run", data: Workout.runWorkout)
]
var body: some View {
VStack {
Chart {
ForEach(workoutData, id: .workoutType) { element in
ForEach(element.data) {
BarMark(
x: .value("Day", $0.day),
y: .value("Workout(in minutes)", $0.minutes)
)
}
.foregroundStyle(by: .value("Workout(type)", element.workoutType))
.position(by: .value("Workout(type)", element.workoutType)) // Asif - this craetes grouped
}
}
.frame(height: 200)
.chartYAxis {
AxisMarks(position: .leading) {
axis in
AxisGridLine()
AxisValueLabel(
centered: true,
collisionResolution: .truncate,
orientation: AxisValueLabelOrientation.verticalReversed
) {
Text("(axis.index * 25) minutes")
}
}
}
}
.padding()
}
}
struct Workout: Identifiable {
let id = UUID()
let day: String
let minutes: Int
}
extension Workout {
static let walkWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 23),
.init(day: "Tue", minutes: 35),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 30),
.init(day: "Fri", minutes: 15),
.init(day: "Sat", minutes: 65),
.init(day: "Sun", minutes: 81),
]
static let runWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 16),
.init(day: "Tue", minutes: 12),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 34),
.init(day: "Fri", minutes: 22),
.init(day: "Sat", minutes: 43),
.init(day: "Sun", minutes: 90),
]
}
Issue: Labels are getting override on each other.
It should be truncated as per Apple doc
collisionResolution: .truncate => Truncate a label to the space available to it.
Please find the screenshot as below –