Pie Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Pie and donut charts with gradients, labels, and glow effects
Installation
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.
<script lang="ts">
import { EvilPieChart } from '$lib/components/evilcharts/charts/layerchart-pie-chart';
import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script><script lang="ts">
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;
</script><EvilPieChart {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}
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
Pass isLoading to show a placeholder animation while your data loads.
Examples
Examples with different configurations. Customize innerRadius, paddingAngle, cornerRadius, and more.
Gradient Colors
Donut Chart
Set innerRadius above 0 to create a donut — it cuts the hole in the center.
Padded Sectors
paddingAngle adds space between sectors; cornerRadius rounds their corners. Combine with innerRadius for a modern donut look.
A negative paddingAngle with a high cornerRadius overlaps sectors into petals. Add innerRadius for a flower-shaped donut.
Labels
Compose <EvilPieChart.Label /> inside <EvilPieChart.Pie> to draw a label on each sector. Use dataKey to change the data shown and labelListProps for further customization.
Glowing Sectors
Pass an array of sector names (values from your nameKey field) to glowingSectors to give those sectors a subtle glow.
Dither rendering
Set renderStyle="dither" on the existing pie root for ordered-dither sectors. Donut holes, padding, rounded corners, labels, tooltips, selection, loading, and sweep motion keep their existing behavior. Use ditherVariant on <Pie /> to override the root texture.
The renderer is independently implemented for EvilCharts SV and inspired by Dither Kit by Boring Software.
API Reference
Props are grouped by the part they belong to.
The root container. Owns the data, shared selection state, and loading skeleton; all visuals are composed as its children.
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.
Per-sector labels composed inside a <Pie />. Renders nothing itself — the parent <Pie /> reads its props and draws the label list over the sectors.
The hover tooltip. Hidden automatically while the chart loads.
The sector legend. When isClickable is set, each entry toggles selection of its sector.
An optional decorative pattern behind the pie. Compose it before the <Pie /> so it sits under the sectors.