Recharts: LabelList content prop not working

Question

I am trying to do a custom label for my barchart using <LabelList> component.

This is my LabelList component and the corresponding render content function:

<LabelList
    dataKey='pv'
    position='insideRight'
    fill='#f5f5f5'
    className={'chart-label'}
    offset={15}
    content={renderLabel}
/>

const renderLabel = function(props: LabelProps){
    return `${props.value}%`;
};

I just need to append a % symbol at the end of the chart value. but this is not working.

Answer 1

I used formatter prop for <LabelList> component instead of content prop.

<LabelList
dataKey='pv'
position='insideRight'
fill='#f5f5f5'
className={'chart-label'}
offset={15}
formatter={renderLabel}
/>

const renderLabel = (props: any) => {
    return `${props}%`;
};

Answer 2

Yes using formatter for this is correct when you just want to affect the raw label text. The content property/api should be used if you want to provide the full markup for the label itself with full freedom to do what ever you like, and can be set to another react component, or to a function which must return the result from JSX rendering

Heres an example for other who stumbles across this blog and might need to use the 'content' freedom.

Use LabelList with content set to function which returns rendered JSX

<LabelList
  content={renderLabelContent}
/>

The function:

const renderLabelContent = (props: object) => {
    const { x: number, y, width, height, value } = props;
    
    return (
      <div>
          {// All kinds of custom JSX/html here}
          {value}
      </div>
    );
  };

Using it with another selfmade react component (CustomizedLabel), you can pass in properties and values;

<LabelList
  content={<CustomizedLabel external={external} />}
/>