Charts

Progress Rings

Up to three concentric rings, each showing progress toward its own goal, with value tiles.

idle

Usage

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

Three rings, each toward its own goal, with value tiles.

size="sm" draws 32px rings for dense grids such as a week or calendar.

Guidance	Practice
Do	Use display strings for units such as "1h 45m". Keep to three rings so each stays distinct.

Guidance	Boundary
Scope	Each ring measures progress toward its own goal. Do not compare ring lengths across rings with different goals.

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

Prop	Type	Default	Description
`rings`	`readonly { id: string; label: string; value: number; goal: number; display?: string; tone?: ChartSeriesTone }[]`	`Required`	One to three rings, outermost first. Progress caps at the goal; tiles show the true share.
`aria-label`	`string`	`Required`	Names the group of rings.
`size`	`"md" \| "sm"`	`"md"`	sm draws a 32px glyph without tiles for dense grids; values stay available to assistive technology.
`formatValue / locale`	`(value: number) => string / string`	`Locale number formatting / "en-US"`	Formats values that have no display string.