Charts

Radar Chart

Up to three profiles across three to eight measures that share one scale, with a tooltip per axis.

idle

Usage

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

Two series across six scores on one 0–10 scale.

Guidance	Practice
Do	Normalize measures to one scale, such as 0–10, and state the scale in the label.

Guidance	Boundary
Scope	Readers judge radar areas poorly. Use it for profiles on one shared scale, and CategoryComparison when exact differences matter.
Scope	Axis order changes the shape; keep it fixed across charts that readers compare.

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

Prop	Type	Default	Description
`axes`	`readonly { id: string; label: string }[]`	`Required`	Three to eight measures, clockwise from the top. All share one scale.
`series`	`readonly { id: string; label: string; values: number[] }[]`	`Required`	One to three profiles with one non-negative value per axis, in axis order.
`max`	`number`	`Largest value`	The value at the outer ring; set it for scores with a known ceiling.
`aria-label / formatValue / locale`	`string / (value: number) => string / string`	`Required / Locale formatting / "en-US"`	Names the chart and formats tooltip values.
`legend`	`boolean`	`true`	Shows the series legend; set false when a surrounding card renders it.

Charts

Up to three profiles across three to eight measures that share one scale, with a tooltip per axis.

idle

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

Two series across six scores on one 0–10 scale.

Guidance	Practice
Do	Normalize measures to one scale, such as 0–10, and state the scale in the label.

Guidance	Boundary
Scope	Readers judge radar areas poorly. Use it for profiles on one shared scale, and CategoryComparison when exact differences matter.
Scope	Axis order changes the shape; keep it fixed across charts that readers compare.

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

Prop	Type	Default	Description
`axes`	`readonly { id: string; label: string }[]`	`Required`	Three to eight measures, clockwise from the top. All share one scale.
`series`	`readonly { id: string; label: string; values: number[] }[]`	`Required`	One to three profiles with one non-negative value per axis, in axis order.
`max`	`number`	`Largest value`	The value at the outer ring; set it for scores with a known ceiling.
`aria-label / formatValue / locale`	`string / (value: number) => string / string`	`Required / Locale formatting / "en-US"`	Names the chart and formats tooltip values.
`legend`	`boolean`	`true`	Shows the series legend; set false when a surrounding card renders it.