Polar
A polar coordinate plot — categories around the circle, value as radius. Bars (a rose), or a polar line/area.
Category: chart · WCAG 2.1-AA · chart, polar, rose, radial, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | PolarDatum[] | — | One entry per category: { label, value, color? }. |
title | string | — | Chart title (also aria-label). |
description | string | — | Supporting description text. |
mode | 'bar' | 'line' | 'area' | bar | Bars (rose), a polar line, or a filled polar area. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
rings | number | 4 | Radial ring count. |
max | number | — | Domain top (full radius). Defaults to the largest value. |
tooltip | boolean | — | Enable hover tooltip. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no rings or labels. For micro/inline charts. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8--cascivo-chart-grid
When to use
- Cyclical/directional categories where the circle is meaningful (wind, hours, months)
- A rose chart comparing a value across directions
When not to use
- Precise magnitude comparison — use BarChart
- Multi-metric profiles on shared axes — use Radar
Examples
Wind rose
import { Polar } from '@cascivo/charts'
<Polar
title="Wind by direction"
mode="bar"
tooltip
data={[
{ label: 'N', value: 12 },
{ label: 'E', value: 8 },
{ label: 'S', value: 5 },
{ label: 'W', value: 15 },
]}
/>