Recharts中LabelList组件content属性自定义标签不生效问题

核心原因 #

你的自定义渲染函数未生效，核心是LabelList运行在SVG渲染上下文内，部分Recharts版本不支持直接返回纯字符串作为渲染内容；另外你也可以用更简单的内置属性实现需求，不需要自定义渲染函数。

方案1：使用内置formatter属性（推荐） #

LabelList自带专门的数值格式化属性formatter，无需自定义content逻辑即可实现加%的需求，修改组件代码如下：

<LabelList
    dataKey='pv'
    position='insideRight'
    fill='#f5f5f5'
    className={'chart-label'}
    offset={15}
    formatter={(value) => `${value}%`}
/>

直接删除原来的content={renderLabel}属性即可，该方案兼容性最好，不需要额外处理位置、样式等属性。

方案2：修复自定义content渲染函数 #

如果你需要保留自定义渲染逻辑，需要把返回值包裹为SVG原生<text>元素，同时透传位置、样式属性确保渲染正常：

const renderLabel = function(props: LabelProps){
    return (
        <text 
            x={props.x} 
            y={props.y} 
            fill={props.fill}
            className={props.className}
            textAnchor="middle"
            dominantBaseline="middle"
        >
            {props.value}%
        </text>
    );
};

其他排查方向 #

如果修改后仍然不显示，按以下顺序排查即可：

• 打印props.value确认数值正常存在，dataKey="pv"对应的字段在数据源中不为空
• 暂时将position改为top，排查是否是offset设置导致标签超出柱子可视区域被裁剪
• 给外层Bar组件添加isAnimationActive={false}属性，排查是否是入场动画导致自定义标签渲染异常

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