React recharts：饼图未呈现

Question

I am not able to render Pie charts, I cannot see that I am doing anything incorrectly (based on what I see in examples and documentation)

Data and Colors:

const piedata = [
    { name: "Technology", value: props.data.tech },
    { name: "Services", value: props.data.services },
    {
      name: "Communication",
      value: props.data.communication,
    },
    { name: "Others", value: props.data.others },
  ];

  const PieColors = ["#bce893", "#44a7e1", "#556cfb", "#f4b040"];

props are in this form

data: EquityAllocation(
communication: 6.1,
others: 2.7,
services: 7.5,
tech: 83.6
)

console.log(props)

Code for Piechart:

<PieChart width="400px" height="400px">
          <Pie
            data={piedata}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={200}
            paddingAngle={5}
            fill="#82ca9d"
            dataKey="value"
            nameKey="name"
          >
            {piedata.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={PieColors[index]} />
            ))}
          </Pie>
        </PieChart>

I am using "recharts": "^2.1.8",

Example in official docs: https://recharts.org/en-US/examples/PieChartWithPaddingAngle

Nothing is printed in logs also, no errors or warnings. I also started whole app again but still, charts are not rendering.

Answer 1

Seems your data is nested one more level. Try like below.

const piedata = [
  { name: "Technology", value: props.data.EquityAllocation.tech },
  { name: "Services", value: props.data.EquityAllocation.services },
  {
    name: "Communication",
    value: props.data.EquityAllocation.communication
  },
  { name: "Others", value: props.data.EquityAllocation.others }
];

Answer 2

So I started the migration to MUIv5 and also upgraded to the latest version of recharts and ran into the same issue. Some of my charts stopped rendering. The observation that I'm having right now is that the chart wants width or height as an actual numeric value. Try switching width="400px" height="400px" to width={400} height={400}

That's what they also have in their Demo charts.