CODEWITHSUNDEEP
reactjstypescriptlabelbar-chartrecharts
Anitta Paul
Anitta Paul

Reputation: 465

Recharts: LabelList content prop not working

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.

Upvotes: 1

Views: 3795

Answers (3)

Benjamin L.
Benjamin L.

Reputation: 11

You have to use svg elements in your jsx. Here is the updated code:

const renderLabel = (props: any) => {
    return <text>props.value</text>;
};

Upvotes: 0

Peter Stjernholm Meldgaard
Peter Stjernholm Meldgaard

Reputation: 250

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} />}
/>

Upvotes: 0

Anitta Paul
Anitta Paul

Reputation: 465

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}%`;
};

Upvotes: 1

Related Questions