SwiftUI Charts: How to center the Y-axis labels on each horizontal bar in a bar chart?

Question

Created Apr ’23

Replies 2

Boosts 0

Views 2.6k

Participants 2

I'm using the new SwiftUI Charts framework to display data in a vertical bar chart, but I'm having trouble centering the Y-axis date labels on each bar:

 struct ChartEntry: Identifiable {
    var id = UUID()
    
    let labelDate: Date
    let amount: Int
}
 
struct ContentView: View {
    
    let chartContent: [ChartEntry]
    
    var body: some View {
        Chart {
            ForEach(chartContent) { entry in
                BarMark(x: .value("Value", entry.amount),
                        y: .value("Hour Label", entry.labelDate, unit: .hour))
            }
        }
        .chartYAxis {
            AxisMarks(position: .leading, values: chartContent.map{$0.labelDate}) { data in
                AxisValueLabel()
            }
        }
        .chartXScale(domain: 0...50)
    }
}

This code generates a chart with Y-axis date labels aligned to the bottom of the bars (I populated the chartContent object with sample entries):

Non Centered.png

I want to center the labels on each bar.

I've tried AxisValueLabel(centered: true). It moved all the Y-axis date labels down in an apparent random amount. Now they are misaligned and in the wrong place. Additionally, the first row is missing a label:

I've also tried AxisMarks(preset: .aligned), but it doesn't change anything.

How can I center the Y-axis date labels on each bar?

I'm aware of this question and this question, but these solutions do not solve the problem.

Thank you very much.

Boost

Answer 1

Flict OP

Apr ’23

This problem only appears to be happening when the Y-axis label is a Date object, so I found a workaround: I converted each Date label into a String and the problem went away. It's not an answer to my question, but a temporary fix.

0

Answer 2

Claude31 OP

Apr ’23

If you find a way to compute the value of offset (using geometryReader), you can try this:

                 BarMark(x: .value("Value", entry.amount),
                        y: .value("Hour Label", entry.labelDate, unit: .hour))
                .offset(y: 10)  &#x2F;&#x2F; 10 should be computed…

0

	struct ChartEntry: Identifiable {
	var id = UUID()

	let labelDate: Date
	let amount: Int
	}

	struct ContentView: View {

	let chartContent: [ChartEntry]

	var body: some View {
	Chart {
	ForEach(chartContent) { entry in
	BarMark(x: .value("Value", entry.amount),
	y: .value("Hour Label", entry.labelDate, unit: .hour))
	}
	}
	.chartYAxis {
	AxisMarks(position: .leading, values: chartContent.map{$0.labelDate}) { data in
	AxisValueLabel()
	}
	}
	.chartXScale(domain: 0...50)
	}
	}

	BarMark(x: .value("Value", entry.amount),
	y: .value("Hour Label", entry.labelDate, unit: .hour))
	.offset(y: 10) // 10 should be computed…