Question 1

Pie chart or donut chart?

Accepted Answer

Both show shares of one total and read the same. A donut is the pie with `innerRadius: 60` on `radialArc`, and its hole holds a figure: the total in the Donut Chart with Text, the picked month's count in the Interactive Pie Chart. Use the plain pie when every pixel should carry data, a donut when there's a number to show or a ring sits better among cards.

Question 2

When shouldn't I use a pie chart?

Accepted Answer

When there are more than six or seven parts: the small slices get too thin to compare or to hover. Group them into an `other` row, as the browser charts here do, or switch to a horizontal bar chart. And when the reader has to rank or compare values rather than see one share against the whole, bars win: lengths compare better than angles.

Question 3

Which of the 11 pie charts should I pick?

Accepted Answer

The Pie Chart for a plain split. Pie Chart with Labels, with Custom Labels or with Label List when the numbers or names must sit on the chart, for a report or a screenshot, and Pie Chart with Legend when the names are long. Donut Chart with Text for a total, Donut Chart with Active Sector to single out one share, the Interactive Pie Chart to let the reader pick it, and the Stacked Pie Chart to compare two splits of the same categories.

Question 4

How do I add labels to a pie chart?

Accepted Answer

Labels are `radialText` marks over the same `pie()` rows as the slices, in a `decorative` layer the pointer skips. The Pie Chart with Labels sets each count 20px past the rim with a `radialRule` leader line, Custom Labels drops the line, and Label List writes each name inside its slice at `radius: 0.5`. `text` takes a field or a function of the row, and every row has its `fraction`, so a percentage is one line.

Question 5

How do I put a total in the middle of a donut?

Accepted Answer

The Donut Chart with Text adds two `radialText` marks at the center, `angle` and `radius` both 0, in a `decorative` `polar()` layer of their own: the sum of the rows in bold, "Visitors" under it. Edit the rows and the total follows. It's SVG text inside a chart read as one image, so say the figure in the card's description too.

Question 6

How do I add a legend to a pie chart?

Accepted Answer

Put `ChartLegend` inside `ChartContainer`, after the chart, as the Pie Chart with Legend does: a swatch and a label per slice, in HTML under the pie, wrapping four to a row. `keys={chartData.map((item) => item.browser)}` lists them in slice order. Reach for it when the names are long or labels on the slices would crowd.

Question 7

How do I give each slice its own color?

Accepted Answer

A pie colors rows, not series: each row's key, `browser` here, has a `chartConfig` entry with a `label` and a `color`, and its slice paints `var(--color-)`. To add a slice, add a row and a matching config entry. The Stacked Pie Chart keys both rings by month, so a month keeps one color inside and out.

Question 8

How do I add or remove the lines between slices?

Accepted Answer

On TanStack Charts, `radialArc` draws no outline unless you give it a `stroke`, so the slices meet edge to edge, as in the Pie Chart without Separators. Set `stroke: "var(--background)"` and a `strokeWidth` for a seam in the page's color, or pass `gapAngle` to `pie()` for empty space: an angle in radians that holds at any size. `cornerRadius` on `radialArc` rounds the slice ends.

Question 9

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn@latest add` with its URL (`shadcn-vue` and `shadcn-svelte` for those ports). 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 10

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 for every framework.

Pie charts

More 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 chart or donut chart?

When shouldn't I use a pie chart?

Which of the 11 pie charts should I pick?

How do I add labels to a pie chart?

How do I put a total in the middle of a donut?

How do I add a legend to a pie chart?

How do I give each slice its own color?

How do I add or remove the lines between slices?

How do I install a chart?

Are the charts free?

Every pie and donut. One file each.