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 { 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 (
    <PieChart responsive height="100%" width="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}
          />
        ))}
      </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>
  );
}

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 { 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 (
    <PieChart responsive height="100%" width="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>
  );
}