Recharts LabelList - how to fix a custom label z-index and being cut off

Question

I'm trying to display on the s values in % with the '%' sign. When using CustomBarLabel, it gets cut off and it's under the Bar. Any idea how to change it?

export const CustomBarLabel = (props) => { const { x, y, value } = props; return ( {value} ); };

<ResponsiveContainer width={isMobile ? 1000 : '100%'} height={chartHeight}> <BarChart aria-label={t('foo')} width={500} height={300} data={graphData} margin={{ top: 20, right: 0, left: 0, bottom: 5 }} > <LabelList position='center' content={} rotate={90} /> <Bar dataKey='c' stackId='a' fill={colours.c} barSize={barSize} radius={[10, 10, 0, 0]}>

Answer 1

Here's the solution:

export const CustomBarLabel = (props: any) => {
  const { x, y, width, height, value } = props;

  const middleX = x + width / 2;
  const middleY = y + height / 2;

  return (
    <g>
      <text x={middleX} y={middleY} fill='#fff' fontSize={10} textAnchor='middle' dominantBaseline='middle'>
        {value} %
      </text>
    </g>
  );
};