MiHCM
data/@mihcm/ui·v0.21.0·stable

CategoryBar

Segmented distribution bar for allocation, status, and risk summaries with optional legend and tokenized segment classes.

Status distribution

Use CategoryBar for part-to-whole status allocation with tokenized segment colors.

Compliance coverage

Current review outcome split.

Compliant64%Pending24%Escalated12%
<CategoryBar data={distributionData} legendPosition="top" valueFormatter={(value, percentage) => `${percentage}%`} />

Compact allocation

Hide the legend when the bar is paired with nearby labels or a table.

Policy allocation3 segments
<CategoryBar data={distributionData} showLegend={false} className="max-w-md" />