Label content props not working

[damn-ice]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Add the Label Component to the Pie Chart.

2. Set the Label position props to center and the content props to a React Element.

What is expected?

The React Element label should be visible at the center of the Pie Chart.

What is actually happening?

The React Element label is not displayed anywhere.

Environment	Info
Recharts	v2.1.2
React	17.0.2
System	Ubuntu 20.04
Browser	Chrome 99.0.4844.51

[travislang]

same for me

[kbeeveer46]

Same for me on v2.1.12. I have not updated to the latest version to see if it's fixed because that version has an annoying bug that scrolls the page up and down to fit the hover tooltip on the page. That bug makes the UX not very good.

[ckifer]

You have to give your label a value

 <Label value="Test Label" position="center" fill="#111" />

If you look at what recharts actually renders for that you see

<text fill="#111" offset="5" x="120" y="120" class="recharts-text recharts-label" text-anchor="middle"><tspan x="120" dy="0.355em">Test Label</tspan></text>

What is being rendered in your example will not render in an SVG and recharts has no idea how to position that div. You will have to do something like the following:

function CustomLabel(props) {
  return (
    <text
      fill="#111"
      offset="5"
      x={props.viewBox.cx}
      y={props.viewBox.cy}
      text-anchor="middle"
    >
      <tspan x="120" dy="0.355em">
        Test Label
      </tspan>
    </text>
  );
}

Closing this as answered, feel free to comment back if there are questions