Polar area chart
FreeEqual wedges whose length shows the value, for categories with an order around a circle such as months, hours or directions. Wedges grow out from the centre.
pnpm dlx shadcn@latest add https://caliperui.site/r/polar-area-chart.json| Category | Value |
|---|---|
| Jan | 320 |
| Feb | 290 |
| Mar | 410 |
| Apr | 460 |
| May | 520 |
| Jun | 610 |
| Jul | 580 |
| Aug | 540 |
| Sep | 700 |
| Oct | 760 |
| Nov | 640 |
| Dec | 590 |
When to use #
Use it for
- Signups by month, incidents by hour, wind by direction.
- Showing a cycle and its peak.
Skip it when
- Unordered categories; use the bar chart.
- Parts of a whole; use the donut chart.
Installation #
terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/polar-area-chart.json
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
This is the code behind the preview above.
example.tsx
import { PolarAreaChart } from "@/components/ui/polar-area-chart" const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; export function PolarAreaChartDemo() { const signups = [320, 290, 410, 460, 520, 610, 580, 540, 700, 760, 640, 590]; return <PolarAreaChart label="Signups by month, 2026" parts={months.map((m, i) => ({ id: m, label: m, value: signups[i] }))} className="w-full max-w-xl" />; }
API reference #
PolarAreaChart
component
PropTypeDefault
label *string—
parts *readonly ChartPart[]—
unitstring""
formatValue((value: number) => string)numberText
loadingboolean—
errorstring—
classNamestring—
Accessibility #
It exposes group and status semantics, with aria-label, aria-busy and aria-hidden kept in step with state. Changes that matter are announced through a live region.
KeyBehaviour
→Moves to the next item or value.
↓Moves to the next item or value.
←Moves to the previous item or value.
↑Moves to the previous item or value.
EscapeCloses or cancels, then returns focus to where it came from.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.