尝试创建自定义 svg label 时反应最小饼图，所有标签都呈现在同一个 position

Question

I am using react-minimal-pie-chart When trying to create custom svg label, all labels are rendering on same position

const Element = (props) => {
  return (
    <text
      dominant-baseline="central"
      x="50"
      y="50"
      dx="19.151111077974452"
      dy="16.06969024216348"
      text-anchor="middle"
      style={{ fontSize: "10px" }}
    >
      <tspan x="50" dy="1.2em">
        {`${Math.round(props.percentage)} %`}
      </tspan>
      <tspan x="0" dy="1.2em">
        {props.title}
      </tspan>
    </text>
  );
};
<PieChart
              data={[
                { title: "Excellent", value: 10, color: "#8dcd81" },
                { title: "Good", value: 15, color: "#eefa6b" },
                { title: "Weak", value: 20, color: "#FF6382" },
              ]}
              label={({ dataEntry }) => <Element {...dataEntry} />}
            />

I want it to look like this:-

What can i do for the above svg code to fix the issue?

Answer 1

I'm the react-minimal-pie-chart maintainer.

As @danny-365csi-engelman said, you should provide dynamic x , y , dx and dy values to the custom tspan element.

label render prop accept a function with the signature described here . You might pass x , y , dx , dy values down to the custom svg element.

Something like:

label={({ x, y, dx, dy, dataEntry }) => (
  <text
    x={x}
    y={y}
    dx={dx}
    dy={dy}
    dominant-baseline="central"
    text-anchor="middle"
    style={}
  >
    {`${Math.round(dataEntry.value)} %`}
  </text>
)}

Answer 2

This is how I managed to get it following @andrea-carraro answer.

<PieChart
        style={{width: '300px', height: '300px'}}
        label={({ x, y, dx, dy, dataEntry }) => (
            <text
                x={x}
                y={y}
                dx={dx}
                dy={dy}
                dominant-baseline="central"
                text-anchor="middle"
                style={{
                    fill: '#fff', pointerEvents: 'none', fontSize: '3px'
                }}>
                <tspan x={x} y={y} dx={dx} dy={dy}>{dataEntry.title}</tspan>
                <tspan x={x} y={y+5} dx={dx} dy={dy}>{`${Math.round(dataEntry.value)}%`}</tspan>
            </text>
        )}
        data={data}
    />