javascript - 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

我在这里更新了你的小提琴脚本。

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

更新：

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