0|

Pie Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Simple static & beautifully designed pie charts with donut, gradient, and glow effects

apidocgithub
Basic Chart

Installation

pnpm dlx shadcn@latest add @beecharts/pie-chart

Usage

The pie chart is composible. <BeePieChart> is the container, and you compose only the parts you need — <Legend>, <Tooltip>, <Background>, and one <Pie> — as its children. The <Pie> carries its own shape props (innerRadius, paddingAngle, cornerRadius, …), its isClickable flag, and glowingSectors, so a single chart can mix any combination of those.

import {
  BeePieChart,
  Pie,
  Label,
  Tooltip,
  Legend,
  Background,
} from "@/components/beecharts/charts/pie-chart";
const data = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
  { browser: "firefox", visitors: 187 },
];
 
const chartConfig = {
  chrome: {
    label: "Chrome",
    colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
  },
  safari: {
    label: "Safari",
    colors: { light: ["#10b981"], dark: ["#34d399"] },
  },
  firefox: {
    label: "Firefox",
    colors: { light: ["#f59e0b"], dark: ["#fbbf24"] },
  },
} satisfies ChartConfig;
<BeePieChart data={data} dataKey="visitors" nameKey="browser" config={chartConfig}>
  <Legend isClickable />
  <Tooltip />
  <Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
    <Label />
  </Pie>
</BeePieChart>

Interactive Selection

Add isClickable to the <Pie> (and to <Legend>) to make sectors selectable. Use the onSelectionChange callback on <BeePieChart> to handle selection events:

<BeePieChart
  data={data}
  dataKey="visitors"
  nameKey="browser"
  config={chartConfig}
  onSelectionChange={(selection) => {
    if (selection) {
      console.log("Selected:", selection.dataKey, "Value:", selection.value);
    } else {
      console.log("Deselected");
    }
  }}
>
  <Legend isClickable />
  <Tooltip />
  <Pie isClickable />
</BeePieChart>

More examples

Donut, padding, label, and glow previews from the Recharts-era docs are being ported. The live preview above is ex-pie-chart.

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

BeePieChart

The root container. It owns the data, the shared selection state, and the loading skeleton. Everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart. An array of objects where each object represents a sector (TData extends Record<string, unknown>).

dataKey*keyof TData & string–

The key from your data objects to use for sector values (typically numeric values that determine sector size).

nameKey*keyof TData & string–

The key from your data objects to use for sector names (typically string values used for labels and legend).

config*ChartConfig–

Configuration object that defines the chart's sectors. Each key should match a value from your nameKey field, with corresponding colors.

children*ReactNode–

The composed chart parts — <Legend />, <Tooltip />, <Background />, and one <Pie />.

classNamestring–

Additional CSS classes to apply to the chart container.

defaultSelectedSectorstring | nullnull

The sector name that should be selected by default.

onSelectionChange(selection: { dataKey: string; value: number } | null) => void–

Callback fired when a sector is selected or deselected — by clicking a clickable <Pie /> sector or <Legend /> entry. Receives an object with dataKey (sector name) and value (sector value), or null when deselected.

isLoadingbooleanfalse

Shows a loading placeholder animation when data is being fetched.

chartPropsComponentProps<typeof PieChart>–

Additional props forwarded to the underlying Recharts PieChart component. Read the Recharts PieChart documentation for available props.

Pie

The pie series. Self-contained — it generates its own radial color gradients and glow filters, so any number of pies can live on one page without style collisions. Compose a <Label /> inside it to draw labels on each sector.

PropTypeDefaultDescription
innerRadiusnumber | string0

The inner radius of the pie. Set to a value greater than 0 to create a donut chart. Can be a number (pixels) or percentage string.

outerRadiusnumber | string"80%"

The outer radius of the pie. Can be a number (pixels) or percentage string.

cornerRadiusnumber0

The border radius for the corners of each sector in pixels.

paddingAnglenumber0

The angle of padding between sectors in degrees. Use a negative value to create overlapping sectors.

startAnglenumber0

The starting angle of the pie in degrees (0 is 3 o'clock, 90 is 12 o'clock).

endAnglenumber360

The ending angle of the pie in degrees. Set to less than 360 for a partial pie.

isClickablebooleanfalse

Enables interactive clicking on sectors to select/deselect them. When a sector is selected, the others dim.

glowingSectorsstring[][]

Array of sector names (values from your nameKey field) that should have a glowing effect applied. Creates a smooth outer glow around the specified sectors.

childrenReactNode–

Optional <Label /> composition that draws labels on each sector.

piePropsOmit<ComponentProps<typeof Pie>, "data" | "dataKey" | "nameKey">–

Escape hatch for raw props forwarded to the underlying Recharts Pie component. Read the Recharts Pie documentation for available props.

Label

Per-sector labels composed inside a <Pie />. It renders nothing on its own — the parent <Pie /> reads its props and draws a label list over the sectors.

PropTypeDefaultDescription
dataKeystring–

The key from your data objects to use for label text. Falls back to the chart's dataKey when omitted.

labelListPropsOmit<ComponentProps<typeof LabelList>, "dataKey">–

Escape hatch for raw props forwarded to the underlying Recharts LabelList component. Read the Recharts LabelList documentation for available props.

Tooltip

The hover tooltip. Hidden automatically while the chart is loading.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip is visible by default at the specified sector index.

Legend

The sector legend. When isClickable is set, each entry toggles selection of its sector.

PropTypeDefaultDescription
variant"square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | …–

The visual style of the legend indicators.

alignleft|center|right"center"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"bottom"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its sector.

Background

An optional decorative pattern drawn behind the pie. Compose it before the <Pie /> so it sits underneath the sectors.

PropTypeDefaultDescription
variantBackgroundVariant"dots"

The background pattern style.

Did you like the content?