ios – SwiftUI Charts – display the red tick at the bottom outside the border


Currently, 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)

Example Chart

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img