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

Question

我正在使用StackBarChart库创建Recharts的示例，但是当它的位置设置为"right"时我无法看到标签，但我能够显示其他标签位置。

<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

我已更新您的小提琴脚本here。

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

更新：

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