SwiftUI charts, how do I align these X axis labels correctly?

Question

Created Dec ’24

Replies 1

Boosts 0

Participants 2

Hi there, so I have this chart that's taking in a Date for it's x values and a time interval for their y values. For some reason, the labels aren't centering on each bar, the only fix I see is to add an offset to each label but that seems hacky.

My code:

 Chart {
                ForEach(weekBreakdownArr, id: \.startDate) { bd in
                    BarMark(
                        x: .value("Date", bd.startDate),
                        y: .value("Duration", bd.durationWorkDone),
                        width: .fixed(15)
                    )
                    .foregroundStyle(Color.redYarn)
                    .cornerRadius(2)
                }
//...
            }
           // shownXValues are just the start dates in an array
            .chartXAxis {
                AxisMarks(position: .automatic, values: shownXValues) { val in
                    AxisValueLabel {
                        Text("Th")
                            .useAppFont(size: 12, relativeTo: .body, weight: .regular)
                    }
                }
            }

Screenshot 2024-12-12 at 3.37.16 PM.png

Boost

Answer 1

darkpaw OP

Dec ’24

Look at your image and imagine there's a blue column immediately to the right of every red column. Now, the x-axis labels look like they're in the centre of the two columns.

So, is your chart supposed to have two columns for each value?

If not, in this line: AxisMarks(position: .automatic, values: shownXValues) { val in can position: .automatic be changed to something else?

Also, is .useAppFont() a SwiftUI thing, or something you've written yourself? I've never seen it before.

0

	Chart {
	ForEach(weekBreakdownArr, id: \.startDate) { bd in
	BarMark(
	x: .value("Date", bd.startDate),
	y: .value("Duration", bd.durationWorkDone),
	width: .fixed(15)
	)
	.foregroundStyle(Color.redYarn)
	.cornerRadius(2)
	}
	//...
	}
	// shownXValues are just the start dates in an array
	.chartXAxis {
	AxisMarks(position: .automatic, values: shownXValues) { val in
	AxisValueLabel {
	Text("Th")
	.useAppFont(size: 12, relativeTo: .body, weight: .regular)
	}
	}
	}