Recharts - метки отображают числа в%

Question

Используя пример диаграммы на сайте recharts, я бы хотел отобразить число на ярлыке в виде%. 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 }

];

Когда я пытаюсь добавить% к массиву, он отображается в метке, но не отображает панель. const data = [ { name: "18-24", аудитория: 35.18 + "%" } ];`

Есть идеи, как этого добиться?

Спасибо!

Answer 1

Вы должны добавить единицу реквизита в Bar составная часть:

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

Вот рабочая демка

Answer 2

Ответ Бходжендры Раунияра не сработал для меня, но это сработало:

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