ReCharts: gráfico de anillos con dos etiquetas en el centro

Solución:

Debe utilizar la propiedad de contenido del componente Etiqueta para crear su propia Etiqueta personalizada porque tanto los elementos secundarios como la propiedad de valor solo aceptan cadenas o números. Con la propiedad de contenido puede pasar un componente como tal:

<Label width={30} position="center"
  content={<CustomLabel value1={totalTasks} value2={tasksNameLabel}/>}>
</Label>

y el componente CustomLabel:

function CustomLabel({viewBox, value1, value2}){
  const {cx, cy} = viewBox;
  return (
   <text x={cx} y={cy} fill="#3d405c" className="recharts-text recharts-label" textAnchor="middle" dominantBaseline="central">
      <tspan alignmentBaseline="middle" fontSize="26">{value1}</tspan>
      <tspan fontSize="14">{value2}</tspan>
   </text>
  )
}

Esta es una pregunta antigua, pero recientemente jugué con esto y parece que puedes usar múltiples componentes de Label y ajustar sus posiciones con css. Esto es lo que modifiqué del ejemplo de Recharts:

const {PieChart, Pie, Legend, Tooltip, Cell, Label} = Recharts;
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const data01 = [{name: 'Group A', value: 5}, {name: 'Group B', value: 4},
                 {name: 'Group C', value: 1}, {name: 'Group D', value: 1}]

const TwoSimplePieChart = React.createClass({
   render () {
   return (
       <PieChart width={800} height={400}>
       <Pie 
       data={data01} 
       cx={300}
       cy={150} 
       innerRadius={60}
       outerRadius={70} 
       fill="#8884d8"
       paddingAngle={2}
       >
       <Label 
       value="6" position="centerBottom"  className="label-top" fontSize="27px"
       />
       <Label 
       value="tasks left" position="centerTop" className="label"
       />
         {
           data01.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
         }
       </Pie>
       <Tooltip/>
      </PieChart>
   );
 }
})

ReactDOM.render(
 <TwoSimplePieChart />,
 document.getElementById('container')
);

y CSS:

.label-top {
    transform: translateY(-10px);
}

Puede consultar JSFiddle aquí: https://jsfiddle.net/trung2012/pcbq3146/34/

---

---

Utiliza Nuestro Buscador