javascript - ReCharts - 堆叠条形图右对齐时无法看到标签

Question

我正在使用 Recharts 库创建 StackBarChart 示例，但当其位置设置为“右”时我无法看到标签 code> 虽然我可以显示其他标签位置。

<BarChart width={400} height={300} data={data} layout="vertical">
   ...
   <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" />
      {/* works fine <LabelList dataKey="name" position="top" /> */}
   </Bar>
</BarChart>

这是Jsfiddle (已更新)。

Answer 1

我已经更新了你的 fiddle 脚本here .

您必须为 LabelList 提供正确的 dataKey 字段，并将 LabelList 作为 Bar 的子项组件

更新:

新jsfiddle ，您的情况需要 margin 。因此，SVG 在图表旁边保留了一些空间用于附加文本。请注意，它是图表的 margin props，而不是 CSS 样式的 margin。