First, I have messed with SwiftUI for a long time, but this is the first time that I've actually started making a ship-quality app with it, so it's entirely possible (likely, even), that the answer is a simple one. I would still appreciate the help. I have very little pride, when learning new stuff.
The issue is that I'm setting up a Swift Chart, and it's a basic bar chart, showing the number of users in a system, splitting them between new users, and ones that have been established.
The output currently looks like so:
Which is great, but the problem that I'm having, right now, is this:
Note how little space there is, between the axis labels, and the chart edge.
I'd like to give it more breathing room, but I'm kind of stumped, as to the proper way to do that.
Thanks, in advance, for any help!
Here's the code for the chart section:
struct UserTypesChart: View {
@State var data: [RCVST_DataProvider.RowPlottableData]
var body: some View {
GroupBox("SLUG-USER-TOTALS-CHART-TITLE".localizedVariant) {
Chart(data) { inRowData in
ForEach(inRowData.data, id: \.userType) { inUserTypeData in
BarMark(
x: .value("SLUG-BAR-CHART-USER-TYPES-X".localizedVariant, inRowData.date),
y: .value("SLUG-BAR-CHART-USER-TYPES-Y".localizedVariant, inUserTypeData.value)
)
.foregroundStyle(by: .value("SLUG-BAR-CHART-USER-TYPES-LEGEND".localizedVariant, inUserTypeData.userType.localizedString))
}
}
}
.chartYAxisLabel("Users", spacing: 12)
.chartYAxis {
AxisMarks(preset: .aligned, position: .leading) { _ in
AxisGridLine()
AxisValueLabel(anchor: .trailing)
}
}
.chartXAxisLabel("Date", alignment: .bottom)
.chartXAxis {
AxisMarks(preset: .aligned, position: .bottom) { _ in
AxisGridLine()
AxisValueLabel()
}
}
.padding()
}
}
UPDATE AS OF OCTOBER 27, 2024:
Sweeper's answer was great, but the samples are taken every twelve hours, so that means the data is interpreted as two bars per day, with interesting results:
If I change it to .hour, I get even more interesting results:
Try using the horizontal spacing for the Y AxisValueLabel:
AxisValueLabel(horizontalSpacing: 20)
So in your example, something like this:
.chartYAxis {
AxisMarks(preset: .aligned, position: .leading) { _ in
AxisGridLine()
AxisValueLabel(horizontalSpacing: 20)
}
}