Pie Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Our pie chart with donut, gradient, and pop-out selection variants.
Overview
Use a pie or donut chart to show a simple part-to-whole relationship with a small number of categories. Use a bar chart when values are close, there are many categories, or precise comparison matters.
Anatomy
PieChart owns the data, configuration, selection, and loading state. Pie controls the sectors and their geometry, while optional Label, Legend, Tooltip, and Background parts add context.
Accessibility
Canvas charts need a nearby text summary or data table when the exact values are important. Label sectors directly when space allows and pair every color with a category name and value.
Installation
Usage
Our pie chart is composable. <PieChart> is the container, and every part hangs off it as a compound member, <PieChart.Legend>, <PieChart.Tooltip>, <PieChart.Background>, and one <PieChart.Pie>, so a single import gives you the whole chart. The <PieChart.Pie> carries its own shape props (innerRadius, paddingAngle, cornerRadius, …) and an isClickable flag.
import { PieChart, type ChartConfig } from "honestui/charts";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;<PieChart data={data} dataKey="visitors" nameKey="browser" config={chartConfig}>
<PieChart.Legend isClickable />
<PieChart.Tooltip />
<PieChart.Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
<PieChart.Label />
</PieChart.Pie>
</PieChart>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 Honest UI 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 has a few implementation details to keep in mind: 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 <PieChart>:
<PieChart
data={data}
dataKey="visitors"
nameKey="browser"
config={chartConfig}
onSelectionChange={(selection) => {
if (selection) {
console.log("Selected:", selection.dataKey, "Value:", selection.value);
} else {
console.log("Deselected");
}
}}
>
<PieChart.Legend isClickable />
<PieChart.Tooltip />
<PieChart.Pie isClickable />
</PieChart>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.
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.