Pie chart

Updated October 3, 2026

PieChart draws one slice per row, each in its own dither pattern, as a pie, a donut, or rings stacked from the center out. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Pie Chart

Visitors by browser, January to June

Visitors by browser
browser	Visitors
Chrome	268
Safari	214
Firefox	179
Edge	152
Other	86

import { PieChart } from "@/components/dithercharts/pie-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "chrome", visitors: 268 },
  { browser: "safari", visitors: 214 },
  { browser: "firefox", visitors: 179 },
  { browser: "edge", visitors: 152 },
  { browser: "other", visitors: 86 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig

export function ChartPieSimple() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add pie-chart

Props

PieChart props
Prop	Type	Default	Description
datarequired	Type readonly ChartRow[]	Default –	One row per slice, clockwise from 12 o'clock, e.g. `{ browser: "chrome", visitors: 275 }`.
configrequired	Type ChartConfig<SlicePattern>	Default –	One entry per slice name (its label and, optionally, its pattern), plus one for `dataKey` (the value's label).
nameKeyrequired	Type string	Default –	The row key that holds each slice's name, e.g. "browser".
dataKeyrequired	Type string \| readonly string[]	Default –	The row key that holds each slice's value, e.g. "visitors"; or one per ring from the center out, e.g. ["desktop", "mobile"].
labelrequired	Type string	Default –	Accessible name, e.g. "Visitors by browser". Also captions the table twin.
separator	Type boolean	Default `true`	A 1-cell paper line between slices.
valueLabels	Type boolean	Default `false`	Each slice's value outside the pie, beside its middle; the pie shrinks to fit them.
labelLines	Type boolean	Default `false`	With `valueLabels`, a 1-cell leader line from each slice out to its value.
labelsInside	Type boolean	Default `false`	Each slice's name inside it, cut out of the ink.
legend	Type boolean	Default `false`	A legend under the chart whose buttons show and hide slices.
innerRadius	Type number	Default `0`	A donut: the hole's radius in CSS pixels.
activeIndex	Type number	Default –	The slice (by its row) highlighted at rest: it grows past the others.
centerLabel	Type boolean	Default `false`	The visible slices' total in the middle (the `activeIndex` slice's value when it is set), over the value's label; pair it with `innerRadius`.
tooltip	Type TooltipOptions	Default –	The tooltip's indicator and label, and the slice it opens on at rest.
style	Type StyleId	Default `"bayer4"`	Dither style.
animation	Type "develop" \| "none"	Default `"develop"`	Entrance animation; reduced motion always shows the final frame.
height	Type number	Default `250`	Height in CSS pixels; the width fills the container.
cell	Type number	Default `3`	Dither cell size in CSS pixels.
className	Type string	Default –	Classes on the chart's outer `figure`.

Styles

The dither styles style takes:

"bayer2"
"bayer4"
"bayer8"
"blue-noise"
"halftone"
"crosshatch"
"pixel"
"stipple"
"engraved"
"mezzotint"
"woodcut"
"floyd-steinberg"
"atkinson"
"riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first slice, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
Key	Action
`←Left arrow` `→Right arrow`	Previous / next slice, anticlockwise / clockwise
`Home` `End`	First / last slice
`↑Up arrow` `↓Down arrow`	Ring outward / inward (stacked rings)
`EscEscape`	Dismiss the cursor

Screen readers

The chart's label names it, says how many slices it has and lists these keys.
Each key press is announced in a polite live region. Moving the pointer is silent.
The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every pie chart example