ios – Styling chart axes

You possibly can add the axis ticks merely utilizing AxisTick, and the axis traces will be added with AxisGridLine. .foregroundStyle will be added to each of those.

The grid traces “by” the chart that you just see are additionally AxisGridLines added by SwiftUI by default. The defaults won’t be added in the event you use the AxisMarks initialiser that takes a @AxisMarkBuilder closure.

In whole, you want 3 units of AxisMarks for every axis:

• one set for the axis labels, each 1 for the y axis, and each 100 for the x axis
• one set for the axis ticks, each 0.2 for the y axis, and each 20 for the x axis
• one set for the axis grid line. You solely want one line for every axis, positioned on the minimal worth of every axis’ area.

Moreover, the tick marks must be offsetted, in order that the grid traces go although the ticks.

Here’s a full instance, the place the y axis is (-2, 2), and x axis is (0, 400).

struct Foo: Identifiable {
    let id: Double
    let y: Double
}


let information: [Foo] = (0..<400).map { Foo(id: Double($0), y: log2(1 - Double.random(in: 0..<1)) / -10 - 1) }

struct ContentView: View {
    var physique: some View {
        Chart(information) {
            LineMark(
                x: .worth("x", $0.id),
                y: .worth("y", $0.y)
            )
            .interpolationMethod(.catmullRom)
            .lineStyle(StrokeStyle(lineWidth: 1))
        }
        .chartXAxisLabel(place: .backside, alignment: .heart) {
            Textual content("X Axis")
        }
        .chartXScale(area: [0, 400])
        .chartXAxis {
            AxisMarks(place: .backside, values: .stride(by: 100)) {
                AxisValueLabel(anchor: .prime)
            }
            AxisMarks(place: .backside, values: .stride(by: 20)) { worth in
                if worth.index != 0 { // the leftmost worth doesn't want a tick
                    AxisTick(size: 8, stroke: .init(lineWidth: 1))
                        .offset(y: -4)
                }
            }
            AxisMarks(place: .backside, values: [0]) {
                AxisGridLine(stroke: .init(lineWidth: 1))
            }
        }
        .chartYAxisLabel(place: .main, alignment: .heart) {
            Textual content("Y Label")
        }
        .chartYScale(area: [-2, 2])
        .chartYAxis {
            AxisMarks(place: .main, values: .stride(by: 1)) {
                AxisValueLabel()
            }
            AxisMarks(place: .main, values: .stride(by: 0.2)) { worth in
                if worth.index != 0 { // the bottommost worth doesn't want a tick
                    AxisTick(size: 8, stroke: .init(lineWidth: 1))
                        .offset(x: 4)
                }
            }
            AxisMarks(place: .main, values: [-2]) {
                AxisGridLine(stroke: .init(lineWidth: 1))
            }
        }
        .padding()
        .aspectRatio(1, contentMode: .match)
    }
}