Pie chart

Basic pie chart

The pie chart is responsive, but doesn't look great when it gets too much space on the sides, as you can see below. We recommend placing it in a container with a max-width.

Code

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

import CustomTooltip from "../CustomToolTip";

const colors = [
  "var(--bfc-theme)",
  "var(--bfc-chill)",
  "var(--bfc-attn)",
  "var(--bfc-warning)",
];

const data = [
  { name: "Windows 10", value: 8 },
  { name: "Windows 11", value: 70 },
  { name: "MacOS Sonoma", value: 5 },
  { name: "MacOS Sequoia", value: 22 },
].map((x, i) => ({
  ...x,
  color: colors[i % colors.length],
}));

export default function BasicPieChart() {
  return (
    <ResponsiveContainer>
      <PieChart>
        <Pie
          data={data}
          stroke="none"
          dataKey="value"
          innerRadius="80%"
          outerRadius="100%"
          paddingAngle={4}
        >
          {data.map((item) => (
            <Cell
              // assuming `item.name` is unique, your data may include an `id`
              key={item.name}
              fill={item.color}
            />
          ))}
        </Pie>
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="middle"
          iconType="circle"
          formatter={(label, data) => (
            <span className="bfc-base">
              {" "}
              {label}
              <strong className="bfc-base-2"> ({data.payload?.value})</strong>
            </span>
          )}
        />
        <Tooltip content={<CustomTooltip />} />
      </PieChart>
    </ResponsiveContainer>
  );
}
import {
  ResponsiveContainer,
  PieChart,
  Tooltip,
  Pie,
  Cell,
  Legend,
} from "recharts";

import CustomTooltip from "../CustomToolTip";

const colors = [
  "var(--bfc-theme)",
  "var(--bfc-chill)",
  "var(--bfc-attn)",
  "var(--bfc-warning)",
];

const data = [
  { name: "Windows 10", value: 8 },
  { name: "Windows 11", value: 70 },
  { name: "MacOS Sonoma", value: 5 },
  { name: "MacOS Sequoia", value: 22 },
].map((x, i) => ({
  ...x,
  color: colors[i % colors.length],
}));

export default function BasicPieChart() {
  return (
    <ResponsiveContainer>
      <PieChart>
        <Pie
          data={data}
          stroke="none"
          dataKey="value"
          innerRadius="80%"
          outerRadius="100%"
          paddingAngle={4}
        >
          {data.map((item) => (
            <Cell
              // assuming `item.name` is unique, your data may include an `id`
              key={item.name}
              fill={item.color}
            />
          ))}
        </Pie>
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="middle"
          iconType="circle"
          formatter={(label, data) => (
            <span className="bfc-base">
              {" "}
              {label}
              <strong className="bfc-base-2"> ({data.payload?.value})</strong>
            </span>
          )}
        />
        <Tooltip content={<CustomTooltip />} />
      </PieChart>
    </ResponsiveContainer>
  );
}

Pie chart with text inside

The pie charts may look better with text inside them. You can achieve that using the RechartsLabel component, along with our code for creating a custom label, as you can see below.

Code

import {
  ResponsiveContainer,
  PieChart,
  Tooltip,
  Pie,
  Cell,
  Legend,
  Label,
} from "recharts";

import CustomTooltip from "../CustomToolTip";

const colors = [
  "var(--bfc-theme)",
  "var(--bfc-chill)",
  "var(--bfc-attn)",
  "var(--bfc-warning)",
];

const data = [
  { name: "Windows 10", value: 8 },
  { name: "Windows 11", value: 70 },
  { name: "MacOS Sonoma", value: 5 },
  { name: "MacOS Sequoia", value: 22 },
].map((x, i) => ({
  ...x,
  color: colors[i % colors.length],
}));

const totalCount = data.reduce((acc, item) => acc + item.value, 0);

export default function PieChartWithTextInside() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart width={100} height={100}>
        <Pie
          data={data}
          stroke="none"
          dataKey="value"
          innerRadius="80%"
          outerRadius="100%"
          paddingAngle={4}
        >
          {data.map((item) => (
            <Cell
              // assuming `item.name` is unique, your data may include an `id`
              key={item.name}
              fill={item.color}
            />
          ))}
          <Label
            position="center"
            dy={-25}
            value="Total"
            fontSize={16}
            fontWeight={600}
            fill="var(--bfc-base-c-2)"
          />
          <Label
            position="center"
            dy={10}
            value={totalCount}
            fontSize={40}
            fill="var(--bfc-base-c)"
          />
        </Pie>
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="middle"
          iconType="circle"
          formatter={(label, data) => (
            <span className="bfc-base">
              {" "}
              {label}
              <strong className="bfc-base-2"> ({data.payload?.value})</strong>
            </span>
          )}
        />
        <Tooltip content={<CustomTooltip />} />
      </PieChart>
    </ResponsiveContainer>
  );
}
import {
  ResponsiveContainer,
  PieChart,
  Tooltip,
  Pie,
  Cell,
  Legend,
  Label,
} from "recharts";

import CustomTooltip from "../CustomToolTip";

const colors = [
  "var(--bfc-theme)",
  "var(--bfc-chill)",
  "var(--bfc-attn)",
  "var(--bfc-warning)",
];

const data = [
  { name: "Windows 10", value: 8 },
  { name: "Windows 11", value: 70 },
  { name: "MacOS Sonoma", value: 5 },
  { name: "MacOS Sequoia", value: 22 },
].map((x, i) => ({
  ...x,
  color: colors[i % colors.length],
}));

const totalCount = data.reduce((acc, item) => acc + item.value, 0);

export default function PieChartWithTextInside() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart width={100} height={100}>
        <Pie
          data={data}
          stroke="none"
          dataKey="value"
          innerRadius="80%"
          outerRadius="100%"
          paddingAngle={4}
        >
          {data.map((item) => (
            <Cell
              // assuming `item.name` is unique, your data may include an `id`
              key={item.name}
              fill={item.color}
            />
          ))}
          <Label
            position="center"
            dy={-25}
            value="Total"
            fontSize={16}
            fontWeight={600}
            fill="var(--bfc-base-c-2)"
          />
          <Label
            position="center"
            dy={10}
            value={totalCount}
            fontSize={40}
            fill="var(--bfc-base-c)"
          />
        </Pie>
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="middle"
          iconType="circle"
          formatter={(label, data) => (
            <span className="bfc-base">
              {" "}
              {label}
              <strong className="bfc-base-2"> ({data.payload?.value})</strong>
            </span>
          )}
        />
        <Tooltip content={<CustomTooltip />} />
      </PieChart>
    </ResponsiveContainer>
  );
}