@ant-design/plots Column柱状图顶部数值标签溢出图表外问题

问题复现代码 #

import React from "react";
import ReactDOM from "react-dom";
import { Column } from "@ant-design/plots";

const DemoColumn = () => {
const data = [
{
  type: "Value 1",
  value: 315801
},
{
  type: "Value 2",
  value: 222095
},
{
  type: "Value 3",
  value: 10800
}
];

const config = {
data,
loading: data.length === 0,
xField: "type",
yField: "value",
seriesField: "type",
  yAxis: {
    label: {
      formatter: (v) => v
    }
  },
  xAxis: false,
  height: 200,
  autoFit: false,
  legend: {
    position: "bottom",
    flipPage: false
  },
  interactions: [
    {
      type: "element-active"
    }
  ],
  label: {
     position: "top",
     offsetY: 8,
     formatter: ({ value }) => value
   }
 };
 return <Column {...config} />;
};

ReactDOM.render(<DemoColumn />, document.getElementById("container"));

问题现象 #

固定高度200px的柱状图中，数值最高的柱体顶部标签超出画布范围被截断，直接设置根层级padding属性修复时会引发布局错乱。

解决方案 #

方案1：追加顶部内边距（推荐） #

注意：直接设置根层级padding会全量覆盖组件自动计算的内边距值，原本适配坐标轴、图例位置的边距被替换后自然会出现布局错乱，不要直接使用该属性。

改用appendPadding配置，在自动计算的边距基础上增量追加顶部预留空间即可，不会破坏原有布局：

const config = {
  // 其余原有配置保持不变
  appendPadding: [24, 0, 0, 0], // 四个值分别对应上、右、下、左方向的追加内边距，顶部预留24px足够容纳标签
}

该方案不需要手动计算数据范围，后续数据变动时也能自动适配，不会出现标签裁切问题。

方案2：手动调整Y轴最大值 #

如果不想调整画布内边距，可以手动设置Y轴最大值，让最高柱体和绘图区上边缘留出足够的标签展示空间：

const config = {
  // 其余原有配置保持不变
  yAxis: {
    label: {
      formatter: (v) => v
    },
    max: 350000 // 取值比当前数据最大值高10%左右即可
  }
}

该方案需要根据实际数据范围调整max值，数据变动时需要同步修改，适配性不如方案1。

内容的提问来源于stack exchange，提问作者nerdess