Circular

DonutChart

Pie and donut composition powered by D3 pie and arc generators, with labels, active slices, legends, center totals, and tooltip rows.

Examples

Pie with outside labels

Pie Chart - Labels Outer labels with leader lines. Desktop Mobile Tablet Other

Pie Chart - Labels
Label	Value
Desktop	1,242
Mobile	918
Tablet	286
Other	174

<DonutChart
  title="Pie Chart - Labels"
  data={pieData}
  innerRadiusRatio={0}
  labelMode="percent"
  labelPosition="outside"
  showCenter={false}
/>

Donut center total

Donut Chart - Center Center value and legend are built into the shell. Desktop Mobile Tablet Other

Donut Chart - Center
Label	Value
Desktop	1.2K
Mobile	918
Tablet	286
Other	174

<DonutChart
  title="Donut Chart - Center"
  data={pieData}
  centerLabel="Visitors"
/>

Active slice

Donut Chart - Active Highlight one slice with a controlled offset. Desktop Mobile Tablet Other

Donut Chart - Active
Label	Value
Desktop	1.2K
Mobile	918
Tablet	286
Other	174

<DonutChart
  title="Donut Chart - Active"
  data={pieData}
  activeId="Mobile"
  labelMode="label"
/>

Props

Prop	Type	Default	Description
`data`	`DonutDatum[]`	`—`	Slices with label, value, optional id, and optional color.
`innerRadiusRatio`	`number`	`0.62`	0 renders a pie; larger values render a donut.
`labelMode`	`'none' \| 'label' \| 'value' \| 'percent'`	`'none'`	Controls labels rendered inside or outside slices.
`labelPosition`	`'inside' \| 'outside'`	`'inside'`	Position for slice labels.
`activeId`	`string`	`—`	Slice id or label to offset from the center.
`showCenter`	`boolean`	`—`	Override automatic center total rendering.
`centerLabel`	`string`	`'Total'`	Small label rendered under the center total.

Install

CLI

npm install d3-shape
npx @a3tai/mittsu add donut-chart --registry ./packages/charts/registry.json