Charts

Part-to-Whole

Shows caller-ordered non-negative parts as a labeled whole, with a complete legend and safe normalization.

idle

Usage

import { PartToWhole } from "@mizen-labs/ui";

A part-to-whole chart with percentage formatting.

Guidance	Practice
Do	Name the whole and each part. Use a deliberate part order and keep the complete legend visible.

Guidance	Boundary
Scope	Use non-negative parts from the same total. Use Category Comparison for signed or independent values.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`parts`	`readonly PartToWholePart[]`	`Required`	Provides caller-ordered labeled parts with stable unique IDs and finite non-negative raw values.
`PartToWholePart`	`{ id: string; label: string; value: number }`	`—`	Uses each value to calculate its share of the whole; the component does not infer or round source values.
`aria-label`	`string`	`Required`	Names the chart and its empty state.
`locale / formatValue`	`string / (value: number) => string`	`"en-US" / Locale number formatting`	Formats raw values and displayed shares. Zero values remain in the legend without a chart arc.

Charts

Shows caller-ordered non-negative parts as a labeled whole, with a complete legend and safe normalization.

idle

import { PartToWhole } from "@mizen-labs/ui";

A part-to-whole chart with percentage formatting.

Guidance	Practice
Do	Name the whole and each part. Use a deliberate part order and keep the complete legend visible.

Guidance	Boundary
Scope	Use non-negative parts from the same total. Use Category Comparison for signed or independent values.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`parts`	`readonly PartToWholePart[]`	`Required`	Provides caller-ordered labeled parts with stable unique IDs and finite non-negative raw values.
`PartToWholePart`	`{ id: string; label: string; value: number }`	`—`	Uses each value to calculate its share of the whole; the component does not infer or round source values.
`aria-label`	`string`	`Required`	Names the chart and its empty state.
`locale / formatValue`	`string / (value: number) => string`	`"en-US" / Locale number formatting`	Formats raw values and displayed shares. Zero values remain in the legend without a chart arc.