Swift Charts：如何防止水平条形标记与Y轴标签重叠

你遇到的条形图和Y轴标签重叠问题，核心原因是图表内容区域未给轴标签预留足够空间，且BarMark默认会填充可用的X轴范围，导致覆盖标签区域。以下是两种实用的解决方法：

方法1：添加图表内边距+轴标记内边距 #

通过给图表设置水平内边距，同时调整Y轴标记的内边距，拉开条形图与标签的距离：

private var testData: [(String, Int)] = []

init() {
    for i in (0 ..< 10).reversed() {
        testData.append(
            ("Item\(i)", i + 3)
        )
    }
}

var body: some View {
    Chart(testData, id: \.0) { item in
        BarMark(
            x: .value("x", item.1),
            y: .value("y", item.0)
        )
        .foregroundStyle(Color.red)
        .annotation(
            position: .overlay,
            alignment: .trailing
        ) {
            Text("\(item.1)")
                .foregroundColor(.white)
                .fontWeight(.bold)
                .padding(.trailing, 8)
        }
    }
    .chartXAxis(.hidden)
    // 给图表左右添加内边距，预留标签空间
    .chartPadding(.horizontal, 50)
    .chartYAxis {
        // 设置轴标记的位置和内边距，远离条形图
        AxisMarks(
            position: .trailing,
            inset: 15
        ) { value in
            AxisValueLabel(centered: true) {
                if let stringValue = value.as(String.self) {
                    Text(stringValue)
                        .font(.title2)
                }
            }
        }
    }
}

关键修改说明： #

• .chartPadding(.horizontal, 50)：为图表左右两侧预留固定空间，防止条形图延伸到容器边缘。
• AxisMarks(inset: 15)：让Y轴标签与条形图保持15pt的间距，彻底避免重叠。如果将Y轴位置改为.leading，只需保留inset参数即可，Swift Charts会自动调整标签的偏移方向。

方法2：手动扩展X轴定义域 #

如果需要严格控制条形图的长度比例，可以手动设置X轴的最大值，给右侧留出缓冲空间：

// 动态计算数据最大值
private var maxDataValue: Int {
    testData.map(\.1).max() ?? 0
}

var body: some View {
    Chart(testData, id: \.0) { item in
        // 保持原有BarMark代码不变
        BarMark(
            x: .value("x", item.1),
            y: .value("y", item.0)
        )
        .foregroundStyle(Color.red)
        .annotation(
            position: .overlay,
            alignment: .trailing
        ) {
            Text("\(item.1)")
                .foregroundColor(.white)
                .fontWeight(.bold)
                .padding(.trailing, 8)
        }
    }
    .chartXScale(domain: 0...maxDataValue + 2) // 给最大值加2作为缓冲
    .chartXAxis(.hidden)
    .chartPadding(.horizontal, 30)
    .chartYAxis {
        AxisMarks(position: .trailing, inset: 10) { value in
            // 保持原有标签代码不变
            AxisValueLabel(centered: true) {
                if let stringValue = value.as(String.self) {
                    Text(stringValue)
                        .font(.title2)
                }
            }
        }
    }
}

这种方法能确保最长的条形图也不会贴到图表边缘，同时给标签留出稳定的显示空间。

内容的提问来源于stack exchange，提问作者William T.