iosswiftswiftuichartsswiftui-charts

Offsetting the Y-Axis From the Chart, in SwiftUI Charts


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:

Basic Chart

Which is great, but the problem that I'm having, right now, is this:

enter image description here

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:

enter image description here

If I change it to .hour, I get even more interesting results:

enter image description here


Solution

  • 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)
            }
        }