Q: How do I add a legend under a Svelte pie?

Nest ` ` inside ` `, as the Pie Chart with Legend does, and pass `keys={chartData.map((item) => item.browser)}` so it lists the slices in the rows' order, not the config's. Its `class` wraps the entries four to a row with `flex-wrap` and `*:basis-1/4`. That chart passes `{ focus: false }` to `defineChart` in place of `chartTooltip()`, so it has no tooltip, as in shadcn/ui's original.

Question 1

Pie or donut: which file do I start from?

Accepted Answer

The Pie Chart for a few shares at a glance, and the Donut Chart when the middle should hold something: the Donut Chart with Text writes the total there, and the Active Sector version pulls one slice out. The label versions name or count each slice, the Pie Chart with Legend lists them underneath, and the Stacked Pie Chart compares two series as an inner and an outer ring. For a card where people pick the month, take the Interactive Pie Chart.

Question 2

How do I turn a pie into a donut?

Accepted Answer

Give `radialArc` an `innerRadius`: the Donut Chart sets `innerRadius: 60`, in pixels, and the slices keep the angles `pie()` gave them. `pie()` lays the rows out from `startAngle: Math.PI / 2` to `endAngle: -Math.PI * 1.5`, one full turn counterclockwise, starting on the right, and `value: "visitors"` names the field each slice measures.

Question 3

Where does the number in the donut's hole come from?

Accepted Answer

From the script: the Donut Chart with Text adds up the rows once with `chartData.reduce((acc, curr) => acc + curr.visitors, 0)` and passes `totalVisitors.toLocaleString()` to a `radialText` at radius 0. It sits in its own `decorative()` `polar()` layer with a second `radialText` for the word Visitors, so the pointer reads only the slices. If the rows arrive as a prop, make `totalVisitors` a `$derived` so it follows them.

Question 4

Inside, outside or on a leader line: how are slice labels drawn?

Accepted Answer

Each label chart adds a `decorative()` `polar()` layer of `radialText` over the slices, on scales where radius 1 is the pie's edge. The Label List version writes each browser's `chartConfig` label at radius 0.5 in `var(--background)`, the Custom Labels version writes the count 20px past the edge, and the Pie Chart with Labels adds a `radialRule` leader line in each slice's `fill`.

Question 5

How does the Interactive Pie Chart pick its month?

Accepted Answer

`let activeMonth = $state(desktopData[0].month)` holds it, and `const definition = $derived(chartDefinition(activeMonth))` draws that slice again 10px further out, with a ring around it and its count in the hole. Our Ark UI select reads a `createListCollection` of the months and writes the rune back with `onValueChange={({ value: [value] }) => value && (activeMonth = value)}`. Each option's swatch is a `<span>` colored with `style:background-color={month.color}`, read from `chartConfig`.

Question 6

How do I add a legend under a Svelte pie?

Accepted Answer

Nest `` inside ``, as the Pie Chart with Legend does, and pass `keys={chartData.map((item) => item.browser)}` so it lists the slices in the rows' order, not the config's. Its `class` wraps the entries four to a row with `flex-wrap` and `*:basis-1/4`. That chart passes `{ focus: false }` to `defineChart` in place of `chartTooltip()`, so it has no tooltip, as in shadcn/ui's original.

Question 7

How do the slices get their colors?

Accepted Answer

`color: chartColors(chartConfig)` in the definition maps each browser key to `var(--color-<key>)`, and `z: "browser"` on `radialArc` gives every slice its key. `ChartContainer` sets those variables from each config entry's `color`, `var(--chart-1)` to `var(--chart-5)`, so changing one entry recolors its slice, its tooltip dot and its legend swatch together.

Question 8

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn-svelte@latest add` with its URL. It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.

Question 9

Are the charts free?

Accepted Answer

Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Pies and donuts, ported to Svelte 5.

Pie charts

More Svelte charts

Pie charts in other frameworks

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Pie or donut: which file do I start from?

How do I turn a pie into a donut?

Where does the number in the donut's hole come from?

Inside, outside or on a leader line: how are slice labels drawn?

How does the Interactive Pie Chart pick its month?

How do I add a legend under a Svelte pie?

How do the slices get their colors?

How do I install a chart?

Are the charts free?

Slice it in Svelte.