Charts

Category Comparison

Compares signed category values around an explicit zero baseline.

idle

Usage

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

Track bars with period tabs.

A labeled comparison of numeric values across categories.

Vertical bars with a comparison value per month, drawn as a quieter bar beside it.

A track behind each bar shows the full scale.

Guidance	Practice
Do	Order categories deliberately and keep the zero baseline visible. Explain the units and meaning of negative values.

Guidance	Boundary
Scope	Use Time Series for change over time. Do not compare values measured in incompatible units.

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

Prop	Type	Default	Description
`categories`	`readonly CategoryComparisonDatum[]`	`Required`	Provides stable caller-ordered categories with unique IDs, visible labels, and finite signed values.
`CategoryComparisonDatum`	`{ id: string; label: string; value: number }`	`—`	Uses the ID as the band key so display labels may repeat.
`aria-label / seriesLabel`	`string`	`Required`	Names the chart and its single comparison series.
`locale / tone`	`string / ChartSeriesTone`	`"en-US" / "series1"`	Sets number formatting and the semantic chart color.
`formatValue / formatAxisValue`	`(value: number) => string`	`Locale number formatting`	Formats tooltip values; axis labels use formatAxisValue when supplied, then formatValue, then locale defaults.