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 pop-out selection, powered by Apache ECharts
Installation
Usage
The ECharts pie chart is composable, sharing the LayerChart sibling’s API shape. <EChartsPieChart> is the container, and every part hangs off it as a compound member — <EChartsPieChart.Legend>, <EChartsPieChart.Tooltip>, <EChartsPieChart.Background>, and one <EChartsPieChart.Pie> — so a single import gives you the whole chart. The <EChartsPieChart.Pie> carries its own shape props (innerRadius, paddingAngle, cornerRadius, …) and an isClickable flag.
<script lang="ts">
import {
EChartsPieChart,
type ChartConfig
} from '$lib/components/evilcharts/charts/echarts-pie-chart/index.js';
</script>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;<EChartsPieChart {data} dataKey="visitors" nameKey="browser" config={chartConfig}>
<EChartsPieChart.Legend isClickable />
<EChartsPieChart.Tooltip />
<EChartsPieChart.Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
<EChartsPieChart.Label />
</EChartsPieChart.Pie>
</EChartsPieChart>The difference is under the hood: these compound children are declarative configuration slots rather than visual DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when renderer="svg".
The config is the same contract as every EvilCharts chart — each key maps a sector name to a label and a per-theme colors array. See Chart Config for the full shape. Colors resolve from your CSS variables at runtime, so dark mode works with no extra wiring.
The ECharts implementation brings a few small departures from the LayerChart sibling: per-sector gradients paint across each sector’s own bounding box, sector gaps are constant-width background borders (parallel-edged from rim to center, not a wedge-shaped angular pad), and the <Background> pattern is a separate SVG layer behind the transparent ECharts surface.
SVG Renderer
Pass renderer="svg" to the chart root to opt into ECharts’ SVG renderer. Omit it to use the default Canvas renderer.
Interactive Selection
Add isClickable to the <Pie> (and <Legend>) to make sectors selectable. Selecting one pops it radially outward — the offset-slice look — while the others dim; select again to reset. Handle selection events with the onSelectionChange callback on <EChartsPieChart>:
<EChartsPieChart
{data}
dataKey="visitors"
nameKey="browser"
config={chartConfig}
onSelectionChange={(selection) => {
if (selection) {
console.log('Selected:', selection.dataKey, 'Value:', selection.value);
} else {
console.log('Deselected');
}
}}
>
<EChartsPieChart.Legend isClickable />
<EChartsPieChart.Tooltip />
<EChartsPieChart.Pie isClickable />
</EChartsPieChart>Loading State
Pass the isLoading prop to show an animated skeleton ring — a shimmer sweeps around the sectors while your data loads.
Examples
Examples of the pie chart in different configurations. Customize innerRadius, paddingAngle, cornerRadius, and more.
Gradient Colors
Donut Chart
Set innerRadius above 0 to create a donut chart — the inner radius carves the hole in the center.
Padded Sectors
Use paddingAngle to space sectors apart and cornerRadius to round their corners. Combine with innerRadius for a modern donut look.
Pair a negative paddingAngle with a high cornerRadius for overlapping, petal-like sectors. A background-colored border separates the petals into a flower-shaped donut.
Labels
Compose a <Label /> inside the <Pie /> to draw labels on each sector. It shows the sector’s value by default; set the <Label />’s dataKey for a different field.
Outside Labels
Set the <Label />’s position to "outside" to move each sector’s name past the rim with a leader line — the classic ECharts pie layout (pie-simple). Outside labels show the sector’s name (from config) by default; inside labels show its value. Give the <Pie /> a smaller outerRadius so the labels have room.
Ordered dither
Set renderStyle="dither" to use the independent ordered-dither treatment inspired by Dither Kit. Labels, tooltips, selection, and the ECharts renderer stay intact.
API Reference
The chart has several parts; the props below are grouped by part. Regardless of renderer, each part is declarative config the root compiles, but the API mirrors the LayerChart sibling one-to-one.
The root container. It owns the data, shared selection state, loading skeleton, and intro reveal. Everything visual is composed as its children and compiled into the ECharts option.
The pie series. Carries its own shape and clickability. When clickable, the selected sector pops radially outward. 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 the labels, either on each sector or outside the rim with a leader line.
The hover tooltip. Its presence enables the tooltip; omit it and none shows. Hidden automatically while the chart is loading.
The sector legend, rendered as HTML over the chart surface. Its presence enables the legend; omit it and none shows. When isClickable is set, each entry toggles selection of its sector.
An optional decorative SVG pattern drawn behind the pie. Its presence renders the pattern; omit it and none shows.