Charts

PieChart and DonutChart

Parts of a whole, with the share of each slice in the legend and the total in the middle.

Ant Design: Pie (Ant Charts)

import { PieChart, DonutChart } from '@alea/ui';

Examples

The share of each slice is in the legend; the total sits in the middle.

Sessions by source

Same data as a pie

A compact share with its own number in the middle.

Plan mix

Parts of a whole. Keep it to six slices or fewer; the legend shows each share (MUI PieChart, Mantine DonutChart).

Prop	Type	Default	Description
`data`required	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Slices: label and value (and an optional color).
`centerCaption`	`ReactNode`	`'Total'`	Small text under the center number of a donut. Default "Total".
`centerLabel`	`ReactNode`	-	Big text in the middle of the donut. Default the total.
`className`	`string`	-	Extra class names for the root element.
`description`	`ReactNode`	-	One sentence on what the chart shows; read before it.
`innerRadius`	`number`	`0`	Inner radius as a share of the radius: 0 is a pie (default), around 0.6 is a donut.
`showTable`	`boolean`	`true`	Shows the "view as table" toggle. Default true.
`size`	`number`	`220`	Size in px. Default 220.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values in the axis, tooltip and table, e.g. v => `${v}k`.

A PieChart with a hole: same props.

Prop	Type	Default	Description
`data`required	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Slices: label and value (and an optional color).
`centerCaption`	`ReactNode`	-	Small text under the center number of a donut. Default "Total".
`centerLabel`	`ReactNode`	-	Big text in the middle of the donut. Default the total.
`className`	`string`	-	Extra class names for the root element.
`description`	`ReactNode`	-	One sentence on what the chart shows; read before it.
`innerRadius`	`number`	-	Inner radius as a share of the radius: 0 is a pie (default), around 0.6 is a donut.
`showTable`	`boolean`	-	Shows the "view as table" toggle. Default true.
`size`	`number`	-	Size in px. Default 220.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values in the axis, tooltip and table, e.g. v => `${v}k`.