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
Installation
Usage
The pie chart is composible. <EvilPieChart> 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 {
EvilPieChart,
Pie,
Label,
Tooltip,
Legend,
Background,
} from "@/components/evilcharts/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;<EvilPieChart data={data} dataKey="visitors" nameKey="browser" config={chartConfig}>
<Legend isClickable />
<Tooltip />
<Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
<Label />
</Pie>
</EvilPieChart>Interactive Selection
Add isClickable to the <Pie> (and to <Legend>) to make sectors selectable. Use the onSelectionChange callback on <EvilPieChart> to handle selection events:
<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");
}
}}
>
<Legend isClickable />
<Tooltip />
<Pie isClickable />
</EvilPieChart>Loading State
The pie chart supports loading state with a placeholder animation. You can pass the isLoading prop to the chart to show the loading state while your data is being fetched.
Examples
Below are some examples of the pie chart with different configurations. You can customize the innerRadius, paddingAngle, cornerRadius, and other properties.
Gradient Colors
Donut Chart
Set innerRadius to a value greater than 0 to create a donut chart. The inner radius creates the hole in the center of the pie.
Padded Sectors
Use paddingAngle to add space between sectors and cornerRadius to round the corners of each sector. Combine with innerRadius for a modern donut look.
Use a negative paddingAngle to create overlapping sectors with a high cornerRadius for a petal-like effect. Combine with innerRadius for a flower-shaped donut chart.
Labels
Enable showLabels to display labels on each sector. You can customize the label with labelKey to show different data, and use labelListProps for additional customization.
Glowing Sectors
Add a subtle glow effect to specific sectors using glowingSectors prop. Pass an array of sector names (the values from your nameKey field) to specify which sectors should glow.
API Reference
The chart is composed of several parts. The props below are grouped by the component they belong to.
The root container. It owns the data, the shared selection state, and the loading skeleton. Everything visual is composed as its children.
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.
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.
The hover tooltip. Hidden automatically while the chart is loading.
The sector legend. When isClickable is set, each entry toggles selection of its sector.
An optional decorative pattern drawn behind the pie. Compose it before the <Pie /> so it sits underneath the sectors.