Part of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.

Web + MobileBêtaGraphiques

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

How one total splits at one moment: credits spent by model this month, storage by kind.
Two to six parts, one of which clearly dominates or is clearly small.

Quand ne pas l’utiliser

Parts compared precisely, or more than six of them.À la place : Bar chart
Parts that change over time.À la place : Area chart
Nested parts (a team, then its projects).À la place : Treemap

Installation

Installer

npm install @krizaka/charts

Importer

import { DonutChart, PieChart } from "@krizaka/charts/pie";

Exemples

Donut

This month's Orazaka credits by model, the total in the hole.

Credits spent in September

Donut chart, 5. Chat · Mistral Large 18,400 (48%), Image · Flux 9,650 (25%), Video · Wan 2.2 7,200 (19%), Speech · Whisper 2,100 (5.5%), Embeddings 640 (1.7%). Total 37,990.

Credits spent in September — data
Model	Credits	%
Chat · Mistral Large	18,400	48%
Image · Flux	9,650	25%
Video · Wan 2.2	7,200	19%
Speech · Whisper	2,100	5.5%
Embeddings	640	1.7%
Total	37,990	100%

Pie

Storage by kind of file, the small kinds folded into “Other”.

Storage by kind

Pie chart, 6. Videos 812 GB (62%), Exports 210 GB (16%), Audio 121 GB (9.2%), Project files 96 GB (7.3%), Thumbnails 64 GB (4.9%), Other 6 GB (0.5%). Total 1,309 GB.

Storage by kind — data
Category	Value	%
Videos	812 GB	62%
Exports	210 GB	16%
Audio	121 GB	9.2%
Project files	96 GB	7.3%
Thumbnails	64 GB	4.9%
Other	6 GB	0.5%
Total	1,309 GB	100%

Props

DonutChart

A pie with a hole: the total (or centerValue) and centerLabel in it.

Prop	Type	Défaut	Description
`data`requis	`readonly T[]`	—	One row per part.
`label`requis	`string \| ((datum: T, index: number) => string)`	—	The field (or function) naming the part.
`title`requis	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`value`requis	`string \| ((datum: T, index: number) => number)`	—	The field (or function) of its amount (≥ 0).
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`centerLabel`	`string`	—	The words under the number in the hole of a donut (“Total credits”).
`centerValue`	`string`	—	The number in the hole, written already. Default: the total.
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`color`	`string \| ((datum: T, index: number) => SeriesColor)`	—	A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the amounts are written.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labelHeader`	`string`	—	The header of the parts in the data table.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`maxSlices`	`number`	—	At most this many slices; the rest fold into one, named `otherLabel`. Default 6.
`onSelect`	`((datum: T, index: number) => void)`	—	Called with the row when a slice is clicked (or Enter is pressed on it).
`otherLabel`	`string`	—	The name of the folded slice. Default “Other”.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`valueHeader`	`string`	—	The header of the amounts in the data table.

PieChart

Prop	Type	Défaut	Description
`data`requis	`readonly T[]`	—	One row per part.
`label`requis	`string \| ((datum: T, index: number) => string)`	—	The field (or function) naming the part.
`title`requis	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`value`requis	`string \| ((datum: T, index: number) => number)`	—	The field (or function) of its amount (≥ 0).
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`centerLabel`	`string`	—	The words under the number in the hole of a donut (“Total credits”).
`centerValue`	`string`	—	The number in the hole, written already. Default: the total.
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`color`	`string \| ((datum: T, index: number) => SeriesColor)`	—	A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`donut`	`boolean`	—	A ring rather than a pie: the total (or `centerValue`) is written in its hole.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the amounts are written.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labelHeader`	`string`	—	The header of the parts in the data table.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`maxSlices`	`number`	—	At most this many slices; the rest fold into one, named `otherLabel`. Default 6.
`onSelect`	`((datum: T, index: number) => void)`	—	Called with the row when a slice is clicked (or Enter is pressed on it).
`otherLabel`	`string`	—	The name of the folded slice. Default “Other”.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`valueHeader`	`string`	—	The header of the amounts in the data table.

Accessibilité

The plot is a group named by the title and described by a summary written from the data, read before anything else.
The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
Colour never carries a meaning alone: the legend, the labels and the table say it in words.
The entrance plays once, when the chart comes on screen, and never under reduced motion.
A 2 px gap in the surface colour separates the slices.

Clavier

Touches	Action
`Tab`	Moves the focus to the plot (one tab stop), then to the data and export buttons.
`Arrow keys`	Walk the items one by one: each is announced and its tooltip shown.
`Home / End`	Jump to the first or the last item.
`Esc`	Hides the tooltip and clears the active item.
`Enter`	Selects the active slice (calls `onSelect` with its row).

Bonnes pratiques

Prefer the donut (DonutChart) with centerLabel: the total is the first thing a reader looks for.
Name the folded slice in your language with otherLabel.
Never put two pies side by side to compare them: use bars.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Pie and donut chart

Quand l’utiliser

Quand ne pas l’utiliser

Installation

Exemples

Donut

Pie

Props

Accessibilité

Clavier

Bonnes pratiques

Sur cette page

Pie and donut chart

Quand l’utiliser

Quand ne pas l’utiliser

Installation

Exemples

Donut

Pie

Props

Accessibilité

Clavier

Bonnes pratiques

Composants liés

Sur cette page