Charts

Bar List

Ranked rows whose background bar shows each value against the largest, with the label on the bar and the value at the end.

idle

Usage

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

Ranked rows with icons; the largest value fills the row.

A longer ranked list without icons, in another palette tone.

Guidance	Practice
Do	Keep labels short so they stay on the bar. Show at most about ten rows and fold the rest into "Other".

Guidance	Boundary
Scope	Use for nominal categories ranked by one measure. Rows always sort largest first; use CategoryComparison when the order is meaningful or values can be negative.

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; icon?: ReactNode }[]`	`Required`	Rows ranked by value, largest first. Each bar shows its value against the largest; values must not be negative.
`aria-label`	`string`	`Required`	Names the list for assistive technology.
`valueLabel`	`string`	`None`	A column caption above the values, such as "Visitors".
`formatValue / locale / tone`	`(value: number) => string / string / ChartSeriesTone`	`Locale number formatting / "en-US" / palette per item`	Formats values. Each item takes its palette color in input order; items past the sixth use the neutral reference tone. tone sets one hue for every bar.