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.