Create this file:

frontend/src/components/PieChart.jsx

Import the pieces you need from Recharts:

import React from "react";
import {
  PieChart,
  Pie,
  Tooltip,
  Cell,
  ResponsiveContainer,
} from "recharts";

Then create a component that receives items as a prop.

Use the same overall approach from barchart:

• if items is empty, return a small fallback message
• count how many times each category appears
• convert that counts object into an array of { name, value } objects

If your app uses plant data, grouping by item.species.name is a sensible starting point.

Once you have a data array, render it like this:

return (
  <div style={{ width: "100%", height: 400 }}>
    <ResponsiveContainer>
      <PieChart>
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          label={({ name }) => name}
          outerRadius={160}
          innerRadius={100}
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  </div>
);

The main new idea is that a pie chart usually needs:

• dataKey for the numeric value
• nameKey for the category label
• one or more Cell elements if you want slice colors

Create a simple array of colors near the top of your file:

const COLORS = ["#8884d8", "#82ca9d", "#ffc658", "#ff7f50", "#a4de6c"];

Then use those colors with the Cell elements shown above so each slice has a different fill color.

Choose at least one:

• customize the tooltip
• change the radius values
• remove labels and compare the result
• add a legend
• sort the data before rendering

Which Chart to Used When?

After finishing, compare your bar chart and pie chart:

• Which one is easier to read?
• Which one makes category differences more obvious?
• Which one would you choose for this dataset?