Pie and Donut · Kind UI charts

Loading chart…

Team allocation (1,000 hours)
Team	Hours	Share of total
design	420	42%
engineering	310	31%
operations	170	17%
research	100	10%

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const config = {
  design: { label: "Design", color: "#733bff", formatValue: (value: unknown) => `${value} hours` },
  engineering: {
    label: "Engineering",
    color: "#2469d4",
    formatValue: (value: unknown) => `${value} hours`,
  },
  operations: {
    label: "Operations",
    color: "#b65c16",
    formatValue: (value: unknown) => `${value} hours`,
  },
  research: {
    label: "Research",
    color: "#147c68",
    formatValue: (value: unknown) => `${value} hours`,
  },
} satisfies Chart.SeriesConfig;
const data: { key: keyof typeof config; hours: number; share: string }[] = [
  { key: "design", hours: 420, share: "42%" },
  { key: "engineering", hours: 310, share: "31%" },
  { key: "operations", hours: 170, share: "17%" },
  { key: "research", hours: 100, share: "10%" },
];

export function TeamAllocationChart({ shape = "pie" }: { shape?: "pie" | "donut" }) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.PieChart animate accessibilityLayer aria-label="Team allocation: 1,000 hours">
          <Chart.PieSeries
            data={data}
            dataKey="hours"
            nameKey="key"
            categoryKey="key"
            innerRadius={shape === "donut" ? 58 : 0}
            outerRadius={108}
            paddingAngle={0}
          >
            <Chart.LabelList
              dataKey="share"
              position="inside"
              fill="white"
              stroke="none"
              style={{ fill: "white", fontWeight: 600 }}
            />
          </Chart.PieSeries>
          <Chart.Tooltip itemKey={(entry) => String(entry.payload?.key ?? entry.name)} />
        </Chart.PieChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Set categoryKey for stable slice colors and innerRadius for a donut.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.PieChart animate accessibilityLayer aria-label="Team allocation">
      <Chart.PieSeries data={data} dataKey="hours" categoryKey="key" nameKey="key" innerRadius={58} outerRadius={108}>
        <Chart.LabelList dataKey="share" position="inside" fill="white" stroke="none" style={{ fill: "white", fontWeight: 600 }} />
      </Chart.PieSeries>
      <Chart.Tooltip itemKey={(entry) => String(entry.payload?.key ?? entry.name)} />
    </Chart.PieChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Use stable keys for config, categoryKey, nameKey and Tooltip.itemKey. Reordering rows preserves their configured colors. Pie has no configured wrapper or separate Donut export.

Chart-owned angular entrance respects reduced motion. animationDirection changes the sweep, preserving final angles and data order.

Controlled categories

Filter rows when legend state changes: Root.visibleSeries alone does not hide sectors. Remaining sectors use the selected total; this example allows an empty selection.

Loading chart…

Team allocation (1,000 hours)
Team	Hours	Share of total
design	420	42%
engineering	310	31%
operations	170	17%
research	100	10%

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import { useState } from "react";
import "@kind-ui/charts/styles.css";

const config = {
  design: { label: "Design", color: "#733bff", formatValue: (value: unknown) => `${value} hours` },
  engineering: {
    label: "Engineering",
    color: "#2469d4",
    formatValue: (value: unknown) => `${value} hours`,
  },
  operations: {
    label: "Operations",
    color: "#b65c16",
    formatValue: (value: unknown) => `${value} hours`,
  },
  research: {
    label: "Research",
    color: "#147c68",
    formatValue: (value: unknown) => `${value} hours`,
  },
} satisfies Chart.SeriesConfig;
const data: { key: keyof typeof config; hours: number; share: string }[] = [
  { key: "design", hours: 420, share: "42%" },
  { key: "engineering", hours: 310, share: "31%" },
  { key: "operations", hours: 170, share: "17%" },
  { key: "research", hours: 100, share: "10%" },
];

export function VisibleAllocationChart() {
  const [visible, setVisible] = useState<string[]>(Object.keys(config));
  const selected = data.filter((row) => visible.includes(row.key));
  const total = selected.reduce((sum, row) => sum + row.hours, 0);
  return (
    <Chart.Root config={config} visibleSeries={visible} onVisibleSeriesChange={setVisible}>
      <Chart.Legend />
      <p role="status" style={{ textAlign: "center", margin: 0 }}>
        {total.toLocaleString("en-US")} hours selected
      </p>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.PieChart animate accessibilityLayer aria-label="Selected team allocation">
          <Chart.PieSeries
            data={selected}
            dataKey="hours"
            nameKey="key"
            categoryKey="key"
            innerRadius={58}
            outerRadius={108}
            paddingAngle={0}
          ></Chart.PieSeries>
          <Chart.Tooltip itemKey={(entry) => String(entry.payload?.key ?? entry.name)} />
        </Chart.PieChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Materials

Choose plain, paper, clay or glow. Percentage labels remain inside sectors; category names stay in the legend.

Loading chart…

Team allocation (1,000 hours)
Team	Hours	Share of total
design	420	42%
engineering	310	31%
operations	170	17%
research	100	10%

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const config = {
  design: { label: "Design", color: "#733bff", formatValue: (value: unknown) => `${value} hours` },
  engineering: {
    label: "Engineering",
    color: "#2469d4",
    formatValue: (value: unknown) => `${value} hours`,
  },
  operations: {
    label: "Operations",
    color: "#b65c16",
    formatValue: (value: unknown) => `${value} hours`,
  },
  research: {
    label: "Research",
    color: "#147c68",
    formatValue: (value: unknown) => `${value} hours`,
  },
} satisfies Chart.SeriesConfig;
const data: { key: keyof typeof config; hours: number; share: string }[] = [
  { key: "design", hours: 420, share: "42%" },
  { key: "engineering", hours: 310, share: "31%" },
  { key: "operations", hours: 170, share: "17%" },
  { key: "research", hours: 100, share: "10%" },
];

export function AllocationMaterialChart({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.PieChart animate accessibilityLayer aria-label="Team allocation: 1,000 hours">
          <Chart.PieSeries
            data={data}
            dataKey="hours"
            nameKey="key"
            innerRadius={58}
            material={material}
            outerRadius={108}
            paddingAngle={0}
          >
            {data.map((row) => (
              <Chart.Cell key={row.key} fill={config[row.key].color} />
            ))}
            <Chart.LabelList
              dataKey="share"
              position="inside"
              fill="white"
              stroke="none"
              style={{ fill: "white", fontWeight: 600 }}
            />
          </Chart.PieSeries>
          <Chart.Tooltip itemKey={(entry) => String(entry.payload?.key ?? entry.name)} />
        </Chart.PieChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

API reference

Focused props for explicit Pie composition; upstream links cover native options.

PieChart

Use inside a sized ResponsiveContainer.

Prop	Type	Default	Description
`animate`	`boolean \| PieAnimation`	`false`	Sector entrance and interaction motion; respects reduced motion.
`animationDirection`	`"clockwise" \| "anticlockwise"`	`"clockwise"`	Continuous entrance sweep; native geometry and row order stay unchanged.
`accessibilityLayer`	`boolean`	`true` in Recharts	Enables native keyboard inspection; set explicitly here.
`aria-label` / `aria-labelledby`	`string`	—	Accessible chart name.
`children`	`ReactNode`	—	Explicit PieSeries, labels and tooltip.

PieAnimation accepts revealDurationMs (default 1000), revealEasing and hoverTransition. Changing these or direction during entrance finishes it. Per-series animation is disabled. See Recharts PieChart.

PieSeries

Value and category identity use separate fields.

Prop	Type	Default	Description
`data`	`Row[]`	—	Consumer-owned category rows.
`dataKey`	`string \| number \| ((row: Row) => unknown)`	`"value"` in Recharts	Numeric value field or accessor; set explicitly here.
`categoryKey`	`string \| ((row: Row) => string)`	Off	Resolves an own top-level field or accessor into `Root.config`; requires explicit series data and string IDs.
`nameKey`	`string \| number \| ((row: Row) => unknown)`	`"name"`	Native category name; use config keys for semantic identity.
`innerRadius`	`number` or percentage	`0`	A positive radius produces a Donut.
`outerRadius`	`number` or percentage	`"80%"`	Sector size; percentages use Recharts' available radius.
`startAngle` / `endAngle`	`number`	`0` / `360`	Native angular geometry in degrees.
`paddingAngle`	`number`	`0`	Gap between sectors in degrees.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Finish on default sectors; consumer rendering can take precedence.
`emphasisKey`	`(payload: unknown) => string \| number \| undefined`	Native name	Optional semantic sector identity for paint emphasis; does not configure tooltip identity.
`stroke`	`string`	`"none"`	Native sector outline.

Explicit series fill disables category defaults; datum or Cell fill wins over them. Custom shapes retain rendering control. Filter rows explicitly; PieSeries has no seriesKey. Custom shapes, filters or transforms can bypass Kind paint. See Recharts Pie.

Shared components

Root, SeriesConfig, Labels and cells, Legend, Tooltip, ResponsiveContainer.

UsageCopy Anchor Link

Controlled categoriesCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

PieChartCopy Anchor Link

PieSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Controlled categories

Materials

API reference

PieChart

PieSeries

Shared components