Charts

Radial Bars

Up to six concentric bars, largest outermost, with each item's exact value in a tile.

idle

Usage

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

Five items as concentric bars, largest outermost, with exact values in tiles.

Guidance	Practice
Do	Keep labels and exact values in the tiles, and fold small items into "Other".

Guidance	Boundary
Scope	Outer rings look longer than inner ones at the same value. Use RadialBars for a compact ranking; use BarList or CategoryComparison when readers compare values.

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

Prop	Type	Default	Description
`items`	`readonly { id: string; label: string; value: number }[]`	`Required`	One to six non-negative values. Tones follow input order; bars sort largest outermost, and the largest spans three quarters of a turn.
`aria-label`	`string`	`Required`	Names the figure.
`formatValue / locale`	`(value: number) => string / string`	`Locale number formatting / "en-US"`	Formats tile values.

Charts

Up to six concentric bars, largest outermost, with each item's exact value in a tile.

idle

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

Five items as concentric bars, largest outermost, with exact values in tiles.

Guidance	Practice
Do	Keep labels and exact values in the tiles, and fold small items into "Other".

Guidance	Boundary
Scope	Outer rings look longer than inner ones at the same value. Use RadialBars for a compact ranking; use BarList or CategoryComparison when readers compare values.

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

Prop	Type	Default	Description
`items`	`readonly { id: string; label: string; value: number }[]`	`Required`	One to six non-negative values. Tones follow input order; bars sort largest outermost, and the largest spans three quarters of a turn.
`aria-label`	`string`	`Required`	Names the figure.
`formatValue / locale`	`(value: number) => string / string`	`Locale number formatting / "en-US"`	Formats tile values.