shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Donut Chart

Q: How do I change the size of the hole?

innerRadius: 60 on radialArc cuts a 60px hole. A larger number makes a thinner ring, a smaller one a fuller pie. Pass a function of the layout, ({ radius }) => radius * 0.6, to keep the hole in proportion when the chart grows.

Q: How do I put a number in the middle?

Add radialText marks at the center (angle: 0, radius: 0) in a decorative polar() layer of their own, as the Donut Chart with Text does: the pointer and the keyboard still read only the slices.

Q: Can I round the slices or space them out?

Pass cornerRadius to radialArc for rounded slice ends, and gapAngle to pie() for real gaps between slices: an angle in radians that stays the same at any size.

A pie with a hollow center: five browser shares on a ring, with room in the middle for a total or an icon. A donut chart for Vue on TanStack Charts.

PreviewCode

About

A donut is a pie with its middle taken out. The slices still show shares of one total, but the ring reads lighter on a dashboard and leaves the center free for a number, a label or an icon. Use the plain pie when every pixel should carry data.

Five browser slices run around a ring with a 60px hole, each in its own chart color. Hovering a slice shows its name and count.

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

<script setup lang="ts">
import ChartPieDonut from "@/components/charts/chart-pie-donut.vue";
</script>

<template>
  <ChartPieDonut />
</template>

Customize

The slices come from pie(chartData, { value: "visitors" }); radialArc draws them with innerRadius: 60, which is the only line that makes this a donut.
polar({ radiusRatio: 0.8 }) sets the outer edge at 80% of the space the square container gives it, so the ring never touches the card's edge.
Each slice is painted var(--color-<browser>) from chartConfig; a 1px stroke in var(--background) draws the thin seam between neighbors.
Each slice carries z: "browser", so its tooltip row takes the browser's config label; valueKey: "visitors" reads the count from the row, and hideLabel drops the title, since a slice is already its own category.
ChartContainer is mx-auto aspect-square max-h-[250px]: the chart stays square and caps at 250px tall.

FAQ

How do I change the size of the hole?

innerRadius: 60 on radialArc cuts a 60px hole. A larger number makes a thinner ring, a smaller one a fuller pie. Pass a function of the layout, ({ radius }) => radius * 0.6, to keep the hole in proportion when the chart grows.

How do I put a number in the middle?

Add radialText marks at the center (angle: 0, radius: 0) in a decorative polar() layer of their own, as the Donut Chart with Text does: the pointer and the keyboard still read only the slices.

Can I round the slices or space them out?

Pass cornerRadius to radialArc for rounded slice ends, and gapAngle to pie() for real gaps between slices: an angle in radians that stays the same at any size.

When is a donut better than a pie?

When there's something to say in the middle, or when a ring sits better among cards and text than a solid disc. For comparing slices, both read the same; past six or seven parts, neither does, and a bar chart is clearer.

Can I read the slices with the keyboard?

Yes. Tab into the chart and the arrow keys move from slice to slice. The tooltip shows each browser and its visitors, without a title row (hideLabel), and a screen reader hears it as a polite update.

API Reference

ChartContainer

<div> data-slot="chart"

PropType

configChartConfig

Each series' label, icon and color, read by the tooltip and the legend.

definitionChartDefinition

The chart: defineChart(spec, chartTooltip()), its data, marks, scales and axes, and the tooltip's focus.

ariaLabelstring

The chart's accessible name: the card's title.

ariaDescription?string

The chart's accessible description.

class?string

The container's size: aspect-auto h-[250px] w-full, mx-auto aspect-square max-h-[250px]. It's aspect-video by default.

#default?slot

What sits under the chart inside the container: a ChartLegend.

tooltip?(ChartTooltipContentOptions & { class?: string }) | false

ChartTooltipContent's options (indicator, hideLabel, labelFormatter…) for the default body, or false for TanStack's own tooltip body.

Type: (ChartTooltipContentOptions & { class?: string }) | false

#tooltip?slot (ChartTooltipBodySlotContext)

A whole tooltip body of your own, in place of ChartTooltipContent: it gets the focused points (each with its datum, group and color). A scoped slot.

Type: slot (ChartTooltipBodySlotContext)

defaultIndex?number

The category whose tooltip shows before any pointer, as Recharts' defaultIndex.

height?number

A fixed height in pixels for the chart, in place of the container's.

aspectRatio?number

A width-to-height ratio for the chart, in place of the container's height.

initialWidth?number

The width the chart renders at before it's measured.

EventType

@focus-change?(point: ChartPoint | null) => void

Called as the focused point changes: a pointer, a key or a tap.

Type: (point: ChartPoint | null) => void

@focus-group-change?(points: readonly ChartPoint[]) => void

Called with every point at the focused category (a stacked or grouped chart's).

Type: (points: readonly ChartPoint[]) => void

@select?(point: ChartPoint | null) => void

Called when a point is clicked or picked with Enter.

Type: (point: ChartPoint | null) => void

CSS variableType

--color-<key>?color

Each config key's color (its theme color in light and dark), set on the container: the marks paint with var(--color-<key>).

ChartTooltipContent

<div>

PropType

pointsreadonly ChartPoint[]

The focused points, from the tooltip's context. ChartContainer passes them to its default body; a body of your own passes its context's.

indicator?"dot" | "line" | "dashed"

The indicator's shape beside each row.

Type: "dot" | "line" | "dashed"
Default: "dot"

hideLabel?boolean

Hides the label above the rows (the focused category).

Default: false

hideIndicator?boolean

Hides each row's color indicator.

Default: false

label?string

The label's text in place of the focused category, looked up in config.

labelKey?string

The datum field (or config key) the label is read from, looked up in config.

nameKey?string

The datum field (or config key) each row's series is read from: a pie's browser.

valueKey?string

The datum field each row's value is read from, for points that carry geometry rather than values (a pie's, from pie()).

color?string

One indicator color for every row, in place of each series' own.

labelFormatter?(label: string, points: readonly ChartPoint[]) => string

Formats the label (the config's label or the category), with the rows' points: a date written out, a unit.

Type: (label: string, points: readonly ChartPoint[]) => string

#formatter?slot ({ value, item, index })

A row's content in place of its indicator, name and value, as shadcn's formatter: a unit, a currency, a total row. A scoped slot; the row's series key is item.key.

class?string

Classes for the tooltip's card.

ChartLegend

<div>

PropType

config?ChartConfig

The series to list: the container's config by default.

keys?readonly string[]

The series keys to list, in order: every key with a color by default.

hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default: false

verticalAlign?"top" | "bottom"

Above the chart or under it.

Type: "top" | "bottom"
Default: "bottom"

class?string

Classes for the legend's row.

ChartConfig

KeyType

label?string

The series' name in the tooltip and the legend.

icon?Component

An icon beside its name in the legend and the tooltip (a lucide-vue-next icon).

color?string

Its color in both themes: a token (var(--chart-1)) or any CSS color.

theme?{ light: string; dark: string }

A color for each theme, in place of color.

Helpers

ExportType

chartTooltip?(settings?: ChartTooltipSettings) => ChartDefinitionOptions

defineChart's second argument for a chart with a tooltip: what a pointer or a key focuses (group-x, each category's series, by default), the focus ring, and the host ChartContainer draws its body in.

Type: (settings?: ChartTooltipSettings) => ChartDefinitionOptions

chartTheme?ChartTheme

defineChart's theme in the site's tokens: the text, the grid and the palette (--chart-1 to --chart-5).

chartColors?(config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }

defineChart's color: each series key (in config order, or keys') painted var(--color-<key>), for marks with a color channel.

Type: (config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }

chartLinearScale?() => LinearScale

A value axis drawn as Recharts draws its default one: zero in the domain, five nice ticks. Pass it as a factory: y: { scale: chartLinearScale }.

Type: () => LinearScale

curveNatural?CurveFactory

D3's natural curve, for a smooth line or area: curve: d3Curve(curveNatural).

curveStep?CurveFactory

D3's step curve, for a line or area that holds each value: curve: d3Curve(curveStep).

curveMonotoneX?CurveFactory

D3's monotone curve, smooth without overshooting a point: curve: d3Curve(curveMonotoneX).

curveLinearClosed?CurveFactory

D3's closed linear curve: a radar's polygon (curve: curveLinearClosed on radialLine and radialArea).

useChart?() => { config: ChartConfig }

The config of the ChartContainer around a component of your own (a custom tooltip body or legend).

Type: () => { config: ChartConfig }

Donut Chart with Text
Pie charts
A donut with the total written in its center.
Donut Chart with Active Sector
Pie charts
A donut with one slice pulled out as active.
Pie Chart
Pie charts
A plain pie, one slice per browser.
Radial Chart with Text
Radial charts
One ring of progress with the total in its center.
Interactive Pie Chart
Pie charts
A donut whose active month is picked from a select.
Pie Chart with Labels
Pie charts
Each slice's value printed beside it.

All 70 charts

Preview

About

Installation

Usage

Customize

FAQ

How do I change the size of the hole?

How do I put a number in the middle?

Can I round the slices or space them out?

When is a donut better than a pie?

Can I read the slices with the keyboard?

API Reference

ChartContainer

ChartTooltipContent

ChartLegend

ChartConfig

Helpers

Related

Donut Chart with Text

Donut Chart with Active Sector

Pie Chart

Radial Chart with Text

Interactive Pie Chart

Pie Chart with Labels