Recharts垂直堆叠条形图right位置标签无法显示问题

我刚梳理了你的问题，核心原因是在垂直布局（layout="vertical"）的堆叠条形图中，当把<LabelList>的position设为"right"时，标签被绘制到了图表容器的外部区域，所以无法正常显示；而设为"top"时，标签处于条形上方的容器范围内，因此能正常渲染。

这里有两个关键修复步骤，帮你快速解决问题：

• 给<BarChart>添加右侧边距，专门为标签留出显示空间
• 可选调整标签的偏移量，让视觉效果更协调

修改后的完整代码示例：

<BarChart 
  width={400} 
  height={300} 
  data={data} 
  layout="vertical"
  margin={{ right: 60 }} // 新增右侧边距，为标签预留显示区域
>
  {/* 原有配置保持不变 */}
  <Bar dataKey="pv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#8884d8" background={{fill: "#ddd", radius: [20,20,20,20]}} tick={false} />
  <Bar dataKey="uv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#aaa" >
    <LabelList dataKey="name" position="right" offset={10} /> {/* 可选：添加offset让标签与条形保持合理间距 */}
  </Bar>
</BarChart>

补充说明： #

垂直布局模式下，position="right"指向的是条形的数值轴方向（右侧），默认图表容器没有预留标签的显示宽度，导致标签被容器边缘截断。添加margin={{ right: 60 }}后，容器右侧会额外留出空间，标签就能正常显示了。

如果还是存在问题，可以额外检查：

• 确认数据源data中的name字段存在且有有效内容
• 适当调大<BarChart>的width值，给标签提供更充足的显示空间

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