||

Pie Chart

Documentation Index

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

Static, beautifully designed pie charts with donut, gradient, and glow effects

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/recharts-pie-chart

Usage

The pie chart is composable. <EvilPieChart> is the container; compose the parts you need — <EvilPieChart.Legend>, <EvilPieChart.Tooltip>, <EvilPieChart.Background>, and one <EvilPieChart.Pie> — as children. Each <EvilPieChart.Pie> owns its shape props (innerRadius, paddingAngle, cornerRadius, …), isClickable, and glowingSectors, so one chart can mix any combination.

import { EvilPieChart } from "@/components/evilcharts/charts/recharts-pie-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-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;
<EvilPieChart data={data} dataKey="visitors" nameKey="browser" config={chartConfig}>
  <EvilPieChart.Legend isClickable />
  <EvilPieChart.Tooltip />
  <EvilPieChart.Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
    <EvilPieChart.Label />
  </EvilPieChart.Pie>
</EvilPieChart>

Interactive Selection

Add isClickable to <EvilPieChart.Pie> (and <EvilPieChart.Legend>) to make sectors selectable. Handle changes with the onSelectionChange callback on <EvilPieChart>:

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

Loading State

isLoading='true'

Examples

Examples with different configurations. Customize innerRadius, paddingAngle, cornerRadius, and more.

Gradient Colors

gradient colors

Donut Chart

innerRadius={60}

Padded Sectors

paddingAngle={4} cornerRadius={8}
innerRadius={60} paddingAngle={-20} cornerRadius={100}

Labels

showLabels={true}

Glowing Sectors

glowingSectors={['chrome', 'safari']}

API Reference

Props are grouped by the part they belong to.

EvilPieChart

The root container. Owns the data, shared selection state, and loading skeleton; all visuals are composed as its children.

PropTypeDefaultDescription
data*TData[]–

An array of objects, one per sector (TData extends Record<string, unknown>).

dataKey*keyof TData & string–

Data key for sector values — typically numbers that set sector size.

nameKey*keyof TData & string–

Data key for sector names — the strings used in labels and legend.

config*ChartConfig–

Defines each sector's colors. Keys should match the values from your nameKey field.

children*ReactNode–

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

classNamestring–

Extra CSS classes for the chart container.

defaultSelectedSectorstring | nullnull

Sector name selected by default.

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

Fires when a sector is selected or deselected via 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 placeholder animation while data loads.

chartPropsComponentProps<typeof PieChart>–

Extra props forwarded to the underlying Recharts PieChart. See the Recharts PieChart docs for options.

Pie

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

PropTypeDefaultDescription
innerRadiusnumber | string0

Inner radius of the pie; set above 0 for a donut. Number (pixels) or percentage string.

outerRadiusnumber | string"80%"

Outer radius of the pie. Number (pixels) or percentage string.

cornerRadiusnumber0

Corner radius of each sector, in pixels.

paddingAnglenumber0

Padding between sectors, in degrees. Negative values overlap sectors.

startAnglenumber0

Starting angle, in degrees (0 is 3 o'clock, 90 is 12 o'clock).

endAnglenumber360

Ending angle, in degrees. Below 360 draws a partial pie.

isClickablebooleanfalse

Lets users click sectors to select/deselect them; selecting one dims the rest.

glowingSectorsstring[][]

Array of sector names (values from your nameKey field) to give a smooth outer glow.

childrenReactNode–

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

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

Escape hatch for raw props forwarded to the underlying Recharts Pie. See the Recharts Pie docs for options.

Label

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

PropTypeDefaultDescription
dataKeystring–

Data key 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. See the Recharts LabelList docs for options.

Tooltip

The hover tooltip. Hidden automatically while the chart loads.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Border-radius of the tooltip.

defaultIndexnumber–

Shows the tooltip by default at the given 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" | …–

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 behind the pie. Compose it before the <Pie /> so it sits under the sectors.

PropTypeDefaultDescription
variantBackgroundVariant"dots"

The background pattern style.

Did you like the content?