Wind rose

Petal area: frequency · Bands stack in first-seen order · North is 0°, clockwise

Wind rose
Observation	Value
0° · Light	5
0° · Moderate	18
0° · Strong	7
45° · Light	12
45° · Moderate	25
45° · Strong	14
90° · Light	19
90° · Moderate	8
90° · Strong	21
135° · Light	26
135° · Moderate	15
135° · Strong	28
180° · Light	9
180° · Moderate	22
180° · Strong	11
225° · Light	16
225° · Moderate	5
225° · Strong	18
270° · Light	23
270° · Moderate	12
270° · Strong	25
315° · Light	6
315° · Moderate	19
315° · Strong	8

Usage

Import the component and the stylesheet once. See Getting started to install the package.

import { WindRoseCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';

<WindRoseCard data={compassBands} direction="direction" band="band" value="value" />

Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. legend={false} removes the legend independently. surface="ghost" controls only the visual frame. See Card composition.

Data

Pre-bin observations into equal sectors. Direction is the centre angle, north at 0°, clockwise, and must be a multiple of 360 / sectors. One row per direction and band. Petal area is proportional to frequency, so radius follows the square root of cumulative frequency. Missing and zero values retain distinct table entries.

const compassBands = [
  {
    "direction": 0,
    "band": "Light",
    "value": 5
  },
  {
    "direction": 0,
    "band": "Moderate",
    "value": 18
  },
  {
    "direction": 0,
    "band": "Strong",
    "value": 7
  },
  {
    "direction": 45,
    "band": "Light",
    "value": 12
  },
  {
    "direction": 45,
    "band": "Moderate",
    "value": 25
  },
  {
    "direction": 45,
    "band": "Strong",
    "value": 14
  },
  {
    "direction": 90,
    "band": "Light",
    "value": 19
  },
  {
    "direction": 90,
    "band": "Moderate",
    "value": 8
  },
  {
    "direction": 90,
    "band": "Strong",
    "value": 21
  },
  {
    "direction": 135,
    "band": "Light",
    "value": 26
  },
  {
    "direction": 135,
    "band": "Moderate",
    "value": 15
  },
  {
    "direction": 135,
    "band": "Strong",
    "value": 28
  },
  {
    "direction": 180,
    "band": "Light",
    "value": 9
  },
  {
    "direction": 180,
    "band": "Moderate",
    "value": 22
  },
  {
    "direction": 180,
    "band": "Strong",
    "value": 11
  },
  {
    "direction": 225,
    "band": "Light",
    "value": 16
  },
  {
    "direction": 225,
    "band": "Moderate",
    "value": 5
  },
  {
    "direction": 225,
    "band": "Strong",
    "value": 18
  },
  {
    "direction": 270,
    "band": "Light",
    "value": 23
  },
  {
    "direction": 270,
    "band": "Moderate",
    "value": 12
  },
  {
    "direction": 270,
    "band": "Strong",
    "value": 25
  },
  {
    "direction": 315,
    "band": "Light",
    "value": 6
  },
  {
    "direction": 315,
    "band": "Moderate",
    "value": 19
  },
  {
    "direction": 315,
    "band": "Strong",
    "value": 8
  }
];

Props

Every prop WindRoseCard accepts, in the order you are likely to reach for them.

Prop	Type	Description
`title`	`string`	Optional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set.
`header`	`boolean`	Defaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection.
`aria-label`	`string`	Accessible chart name, independent of the visible title. Falls back to title, then a generic chart name.
`data`	`Row[]`	One row per observation. Omit when using ranges.
`height`	`number`	Minimum plot height, default 340px. Dense data may expand within the scrollable viewport.
`depth`	`boolean`	Lit tiles, solid bars, or spheres. Data positions remain exact; loading keeps the same depth treatment.
`color`	`string`	Override the palette with one CSS color.
`headline`	`number`	Override the resting headline.
`delta`	`number`	Fractional change shown alongside the headline.
`deltaTone`	`'default' \| 'inverse' \| 'neutral'`	Use inverse when a decrease is good.
`range`	`string`	Static period label.
`ranges`	`{ id, label, data, headline?, delta? }[]`	Period choices with their own data.
`defaultRange`	`string`	Initial period id.
`locale`	`string`	Locale for numbers and dates; defaults to en-US.
`formatValue`	`(value: number) => string`	Custom value formatter.
`badge`	`ReactNode`	Content for the glass tab above the card.
`className`	`string`	Class on the card frame.
`style`	`CSSProperties \| ChartStyle`	Inline styles and scoped chart variables.
`onSelectionChange`	`(selection \| null) => void`	Reports id, original row (or null for an absent day), value, and pinned state.
`renderReadout`	`(selection \| null) => ReactNode`	Consumer-owned readout, including when the header is hidden.
`valueFormat`	`Intl.NumberFormatOptions`	Formats the headline, tiles, and axis, e.g. currency.
`surface`	`'elevated' \| 'outline' \| 'ghost'`	Card treatment. Ghost removes the visual frame only; header and legend are independent controls.
`palette`	`'iris' \| 'cobalt' \| 'emerald'`	Series colors. Iris by default; explicit series colors still win.
`numberStyle`	`'count' \| 'pop' \| 'slide' \| 'roll' \| 'flow' \| 'scramble'`	How the headline animates when its value changes. Count (default) counts to the new value.
`loading`	`boolean`	Shows a neutral loading skeleton, not data.
`loadingStyle`	`'shimmer' \| 'draw' \| 'breathe'`	Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion.
`empty`	`'dots' \| 'shape' \| ReactElement \| null`	What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero.
`motion`	`'auto' \| 'none'`	None turns off decorative motion; reduced motion does this automatically.
`direction`	`numeric key of Row`	Compass sector centre in degrees, north at 0 and clockwise.
`band`	`text key of Row`	Magnitude-band label; stacking follows first-seen order.
`value`	`numeric key of Row`	Nonnegative numeric measurement. Null or undefined is missing.
`sectors`	`number`	Number of equal compass sectors, 4 to 16. Supply matching pre-binned centre angles. Default 8.
`tilt`	`number`	Vertical proportion of the projected plane, from 0.4 to 1 (Wind rose: 0.45 to 1). Default 0.76.
`aggregate`	`'sum' \| 'mean' \| 'max'`	Fallback resting summary. A family-defined summary (such as located point count, hierarchy total, or mean signed value) takes precedence. Use headline to override that summary.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.
`legendSwatch`	`'square' \| 'dot' \| 'line'`	Marker beside each group label, where a group legend is present. Defaults to square.
`legend`	`false \| 'tiles' \| 'inline' \| 'list' \| 'pills' \| 'bars'`	Layout for the group legend where the data produces groups. False hides it; defaults to tiles.

Wind rose

Observation

Value

0° · Light

0° · Moderate

0° · Strong

45° · Light

45° · Moderate

45° · Strong

90° · Light

90° · Moderate

90° · Strong

135° · Light

135° · Moderate

135° · Strong

180° · Light

180° · Moderate

180° · Strong

225° · Light

225° · Moderate

225° · Strong

270° · Light

270° · Moderate

270° · Strong

315° · Light

315° · Moderate

315° · Strong

Data

const compassBands = [ { "direction": 0, "band": "Light", "value": 5 }, { "direction": 0, "band": "Moderate", "value": 18 }, { "direction": 0, "band": "Strong", "value": 7 }, { "direction": 45, "band": "Light", "value": 12 }, { "direction": 45, "band": "Moderate", "value": 25 }, { "direction": 45, "band": "Strong", "value": 14 }, { "direction": 90, "band": "Light", "value": 19 }, { "direction": 90, "band": "Moderate", "value": 8 }, { "direction": 90, "band": "Strong", "value": 21 }, { "direction": 135, "band": "Light", "value": 26 }, { "direction": 135, "band": "Moderate", "value": 15 }, { "direction": 135, "band": "Strong", "value": 28 }, { "direction": 180, "band": "Light", "value": 9 }, { "direction": 180, "band": "Moderate", "value": 22 }, { "direction": 180, "band": "Strong", "value": 11 }, { "direction": 225, "band": "Light", "value": 16 }, { "direction": 225, "band": "Moderate", "value": 5 }, { "direction": 225, "band": "Strong", "value": 18 }, { "direction": 270, "band": "Light", "value": 23 }, { "direction": 270, "band": "Moderate", "value": 12 }, { "direction": 270, "band": "Strong", "value": 25 }, { "direction": 315, "band": "Light", "value": 6 }, { "direction": 315, "band": "Moderate", "value": 19 }, { "direction": 315, "band": "Strong", "value": 8 } ];

Prop

Type

Description

title

string

Optional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set.

header

boolean

Defaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection.

aria-label

string

Accessible chart name, independent of the visible title. Falls back to title, then a generic chart name.

data

Row[]

One row per observation. Omit when using ranges.

height

number

Minimum plot height, default 340px. Dense data may expand within the scrollable viewport.

depth

boolean

Lit tiles, solid bars, or spheres. Data positions remain exact; loading keeps the same depth treatment.

color

string

Override the palette with one CSS color.

headline

number

Override the resting headline.

delta

number

Fractional change shown alongside the headline.

deltaTone

'default' | 'inverse' | 'neutral'

Use inverse when a decrease is good.

range

string

Static period label.

ranges

{ id, label, data, headline?, delta? }[]

Period choices with their own data.

defaultRange

string

Initial period id.

locale

string

Locale for numbers and dates; defaults to en-US.

formatValue

(value: number) => string

Custom value formatter.

badge

ReactNode

Content for the glass tab above the card.

className

string

Class on the card frame.

style

CSSProperties | ChartStyle

Inline styles and scoped chart variables.

onSelectionChange

(selection | null) => void

Reports id, original row (or null for an absent day), value, and pinned state.

renderReadout

(selection | null) => ReactNode

Consumer-owned readout, including when the header is hidden.

valueFormat

Intl.NumberFormatOptions

Formats the headline, tiles, and axis, e.g. currency.

surface

'elevated' | 'outline' | 'ghost'

Card treatment. Ghost removes the visual frame only; header and legend are independent controls.

palette

'iris' | 'cobalt' | 'emerald'

Series colors. Iris by default; explicit series colors still win.

numberStyle

How the headline animates when its value changes. Count (default) counts to the new value.

loading

boolean

Shows a neutral loading skeleton, not data.

loadingStyle

'shimmer' | 'draw' | 'breathe'

Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion.

empty

'dots' | 'shape' | ReactElement | null

What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero.

motion

'auto' | 'none'

None turns off decorative motion; reduced motion does this automatically.

direction

numeric key of Row

Compass sector centre in degrees, north at 0 and clockwise.

band

text key of Row

Magnitude-band label; stacking follows first-seen order.

value

numeric key of Row

Nonnegative numeric measurement. Null or undefined is missing.

sectors

number

Number of equal compass sectors, 4 to 16. Supply matching pre-binned centre angles. Default 8.

tilt

number

Vertical proportion of the projected plane, from 0.4 to 1 (Wind rose: 0.45 to 1). Default 0.76.

aggregate

'sum' | 'mean' | 'max'

Fallback resting summary. A family-defined summary (such as located point count, hierarchy total, or mean signed value) takes precedence. Use headline to override that summary.

onKeyDown

KeyboardEventHandler<HTMLElement>

Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.

legendSwatch

'square' | 'dot' | 'line'

Marker beside each group label, where a group legend is present. Defaults to square.

legend

Layout for the group legend where the data produces groups. False hides it; defaults to tiles.

Chart style

Palette

Theme

Appearance

Reading & motion

Usage

Data

Props

Chart style

Palette

Theme

Appearance

Reading & motion

Wind rose

Usage

Data

Props