shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Pie Chart

Q: How do I color the slices?

Each slice paints var(--color- ), and chartConfig.chrome.color sets that variable to var(--chart-1). To add a slice, add a row with its browser, visitors and fill: "var(--color- )", and a config entry with a label and a color.

Q: How do I start the pie at twelve o'clock?

Remove startAngle and endAngle from the pie() call. TanStack's angles are radians from twelve o'clock, clockwise; the chart sets Math.PI / 2 to -Math.PI * 1.5 to start at three o'clock and run counterclockwise like shadcn/ui's.

Q: How do I sort the slices by size?

pie() keeps your rows' order. Pass orderBy: "visitors" and order: "descending" to lay the largest slice out first, or sort chartData before the call.

A plain pie, one slice per browser sized by its share of visitors. The base for any parts-of-a-whole chart in Vue, drawn with TanStack Charts.

PreviewCode

About

Use a pie when a handful of parts add up to one total and the reader wants the biggest share at a glance. Past six or seven slices the small ones blur; a horizontal bar chart ranks them better. When you want a total in the middle, use the donut.

Five slices run counterclockwise from three o'clock, Chrome first, each in its own chart color. Nothing is written on the pie: hovering a slice shows its browser and visitors.

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 ChartPieSimple from "@/components/charts/chart-pie-simple.vue";
</script>

<template>
  <ChartPieSimple />
</template>

Customize

pie(chartData, { value: "visitors" }) turns rows into slices: each keeps its fields and gains startAngle, endAngle, angle and fraction. radialArc draws them inside polar().
Slices are painted var(--color-<browser>), set by chartConfig; each row's fill holds the same variable for the tooltip's dot.
startAngle: Math.PI / 2 and endAngle: -Math.PI * 1.5 begin at three o'clock and go counterclockwise. Drop them to start at twelve and go clockwise.
The tooltip needs valueKey: "visitors": a slice's point is an angle, so the kit reads the count from the row. Its name comes from the slice's z: "browser" key.
radiusRatio: 0.8 sizes the pie inside the mx-auto aspect-square max-h-[250px] container, so it stays round at any width.

FAQ

How many slices can a pie take?

Five to seven read well. Past that, the small slices get too thin to compare or to hover. Group the smallest into an other row, as this data does, or switch to a horizontal bar chart.

How do I color the slices?

Each slice paints var(--color-<browser>), and chartConfig.chrome.color sets that variable to var(--chart-1). To add a slice, add a row with its browser, visitors and fill: "var(--color-<browser>)", and a config entry with a label and a color.

How do I start the pie at twelve o'clock?

Remove startAngle and endAngle from the pie() call. TanStack's angles are radians from twelve o'clock, clockwise; the chart sets Math.PI / 2 to -Math.PI * 1.5 to start at three o'clock and run counterclockwise like shadcn/ui's.

How do I sort the slices by size?

pie() keeps your rows' order. Pass orderBy: "visitors" and order: "descending" to lay the largest slice out first, or sort chartData before the call.

Pie or bar chart?

For parts of one total, when the biggest share is the message. To compare values, or rank more than a handful, bars are easier to read: lengths compare better than angles.

Can I reach the slices with the keyboard?

Yes. Tab into the chart and the arrow keys step from slice to slice; the tooltip shows each browser and its count, and a screen reader hears it. The chart's name is the card title, Pie Chart.

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
Pie charts
A pie with a hollow center: a donut.
Pie Chart with Legend
Pie charts
A pie with a legend of its slices underneath.
Pie Chart with Labels
Pie charts
Each slice's value printed beside it.
Mixed Bar Chart
Bar charts
Horizontal bars, each category in a color of its own.
Pie Chart without Separators
Pie charts
Slices drawn edge to edge, without the gaps between them.
Radial Chart
Radial charts
One ring per browser, each as long as its share.

All 70 charts

Preview

About

Installation

Usage

Customize

FAQ

How many slices can a pie take?

How do I color the slices?

How do I start the pie at twelve o'clock?

How do I sort the slices by size?

Pie or bar chart?

Can I reach the slices with the keyboard?

API Reference

ChartContainer

ChartTooltipContent

ChartLegend

ChartConfig

Helpers

Related

Donut Chart

Pie Chart with Legend

Pie Chart with Labels

Mixed Bar Chart

Pie Chart without Separators

Radial Chart