How to display the red tick at the bottom outside the border?

Question

Here is my source code and screenshot of the sample app I'm doing. My only concern is how can I show the red tick outside the border at the bottom part?

VStack(alignment: .leading) {
    Chart {
        ForEach(chartData, id: \.id) { item in
            LineMark(
                x: .value("Beat", item.beat),
                y: .value("Value", item.value)
            )
            .foregroundStyle(item.type.color.opacity(lineVisibility[item.type]!))
            .foregroundStyle(by: .value("Plot", item.type))
            .lineStyle(.init(lineWidth: 2))
        }
    }
    .border(.black, width: 2)
    .chartLegend(.hidden)
    .chartYAxis(.hidden)
    .chartXAxis {
        AxisMarks(values: .automatic(desiredCount: numberOfBeats, roundLowerBound: true, roundUpperBound: true)) { _ in
            AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.gray)
            AxisTick(centered: true, length: 20, stroke: .init(lineWidth: 1))
                .foregroundStyle(Color.red)
        }
    }
    .padding(.trailing, 15)
    
    HStack {
        Text("0 beat")
            .padding(.leading, -15)
        Spacer()
        Text("\(numberOfBeats) beat")
    }
}
.frame(minWidth: GENERAL_WIDTH * 2)
.padding(.trailing, 10)

Answer 1

You could try this approach, using an offset, such as:

.chartXAxis {
    AxisMarks(values: .automatic(desiredCount: numberOfBeats, roundLowerBound: true, roundUpperBound: true)) { _ in
        AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.gray)
        AxisTick(centered: true, length: 20, stroke: .init(lineWidth: 1))
            .foregroundStyle(Color.gray)
        AxisTick(centered: true, length: 20, stroke: .init(lineWidth: 1))
            .foregroundStyle(Color.red)
            .offset(y: 20)
    }
}