IOS Swift Question posted in
The official documentation can be found here.

Ios swift – 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()
    }
}
Tags:

2

Answers


  1. 0

    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)
        }
    }
    Login or Signup to reply.
  2. 0

    When plotting dates on a bar chart, always pass a unit: argument. In this case, each bar presumably represents a day, so you should do

    BarMark(
    x: .value("X", inRowData.date, unit: .day), // HERE
    y: .value("Y", inUserTypeData.value)
)

    This tells SwiftUI Charts that this is categorical data, and not continuous/numerical data. This helps the chart to lay out the chart in the way you expect, and adds some reasonable spacing between the axis and the marks.

    This also gives the bars an appropriate width. Your current code should be emitting a warning telling you that the bar widths are not defined, and falling back to a default value.

    If you want more spacing, you can pass a horizontalSpacing: argument like in Marcy’s answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search