CODEWITHSUNDEEP
reactjslabelrecharts
Gearóid
Gearóid

Reputation: 179

Recharts - labels display numbers as %

Using the example barchart on the recharts site, I'd like to display the number on the label as a %. https://jsfiddle.net/gearoid/7e717fa8/1/

const data = [
    { name: "18-24", audience: 35.18 },
    { name: "25-34", audience: 21.96 },
    { name: "35-44", audience: 7.26 },
    { name: "45-54", audience: 2.19 },
    { name: "55-64", audience: 0.67 },
    { name: "65+", audience: 0.33 },
    { name: "unknown", audience: 32.41 }

];

When I try adding the % to the array it's displayed in the label but it doesn't display the bar. const data = [ { name: "18-24", audience: 35.18 + "%" } ];`

Any idea on how to achieve this?

Thanks!

Upvotes: 2

Views: 4461

Answers (2)

Asu
Asu

Reputation: 1843

The answer by Bhojendra Rauniyar did not work for me, but this worked:

const labelFormatter = (value) => {
    return value + '%';
};
...
...
...
<Bar label={{ position: 'right', formatter: labelFormatter }}/>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to add unit props in Bar component:

<Bar dataKey="audience" fill="#82ca9d" unit="%" />

Here's a working demo

Upvotes: 0

Related Questions