Recharts LabelList：如何修复自定义标签层级与被截断问题

针对你遇到的标签被截断、位置在条形下方的问题，可按以下步骤修复：

1. 修正自定义标签组件的语法与布局 #

你的CustomBarLabel组件存在语法错误，且未设置文本对齐属性，导致位置偏移。修改为：

export const CustomBarLabel = (props) => {
  const { x, y, value } = props;
  // 使用text元素并设置对齐属性，确保标签在条形内居中，同时添加百分号
  return (
    <text 
      x={x} 
      y={y} 
      textAnchor="middle" 
      dominantBaseline="middle"
      fill="#fff" // 可选：设置文字颜色，避免被条形填充色覆盖
      fontSize={12}
    >
      {value}%
    </text>
  );
};

2. 正确配置LabelList组件 #

你之前的LabelList未传入自定义标签组件，且旋转角度可能导致位置异常。调整配置并嵌套到对应Bar组件内部：

<Bar 
  dataKey='c' 
  stackId='a' 
  fill={colours.c} 
  barSize={barSize} 
  radius={[10, 10, 0, 0]}
>
  <LabelList 
    position="center" 
    content={<CustomBarLabel />} // 传入自定义标签组件
    rotate={0} // 垂直条形图无需旋转，旋转90度会导致标签偏移到条形外
    offset={0} // 可根据需要调整偏移量，比如设为-5让标签向上微调
  />
</Bar>

3. 调整图表边距与容器尺寸 #

过小的底部边距会导致标签被截断，同时移动端固定宽度可能引发溢出问题：

<ResponsiveContainer width="100%" height={chartHeight}> {/* 移动端用100%宽度适配 */}
<BarChart
  aria-label={t('foo')}
  data={graphData}
  margin={{ top: 20, right: 20, left: 20, bottom: 30 }} // 增大底部边距，避免标签被截断
>
  {/* 上述Bar组件代码放这里 */}
</BarChart>
</ResponsiveContainer>

额外提示 #

如果条形高度过矮导致标签无法容纳，可尝试：

• 增大barSize值，提升条形高度
• 给LabelList设置offset为负数，让标签向上偏移到条形内部
• 缩小标签字体大小，避免溢出

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