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 composible, sharing the Recharts twin'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.
import { EChartsPieChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-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;<EChartsPieChart data={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 one real difference is under the hood: ECharts renders to a <canvas>, so these children never mount as DOM. The root reads their props and compiles them into the ECharts option — same JSX, same presence semantics (omit a part and it won't render), same behavior, just declarative config instead of live DOM nodes.
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.
Canvas rendering brings a few small departures from the Recharts twin: 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 an SVG layer behind the transparent canvas.
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={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.
API Reference
The chart has several parts; the props below are grouped by part. On canvas each part is declarative config the root compiles, but the API mirrors the Recharts twin 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 canvas. 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.