CODEWITHSUNDEEP
javascriptreactjsrecharts
sahil solanki
sahil solanki

Reputation: 507

ReCharts - not able to see label when right aligned for stacked bar chart

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

Upvotes: 2

Views: 4193

Answers (1)

An Nguyen
An Nguyen

Reputation: 1478

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.

Upvotes: 1

Related Questions