图表-右对齐堆叠条形图时看不到标签

Question

I am creating an example of StackBarChart using Recharts library but I am not able to see the label when it's position is set to "right" though I am able to show the other label positions.

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

Here is the Jsfiddle (updated).

Answer 1

I have updated your fiddle script here .

You have to provide a correct dataKey field to LabelList , and put LabelList as a child of Bar component

UPDATED:

New jsfiddle , you need margin in your case. So that the SVG reserved some spaces aside of the chart for additional text. NOTE that it is the margin props of the chart, not the margin from CSS style.