Contour islands

Higher terraces: denser observations · Contours are estimates; dots are actual readings

Customer activity
Observation	Value
Account 01	1
Account 02	1
Account 03	1
Account 04	1
Account 05	1
Account 06	1
Account 07	1
Account 08	1
Account 09	1
Account 10	1
Account 11	1
Account 12	1
Account 13	1
Account 14	1
Account 15	1
Account 16	1
Account 17	1
Account 18	1
Account 19	1
Account 20	1
Account 21	1
Account 22	1
Account 23	1
Account 24	1
Account 25	1
Account 26	1
Account 27	1
Account 28	1
Account 29	1
Account 30	1
Account 31	1
Account 32	1
Account 33	1
Account 34	1
Account 35	1
Account 36	1
Account 37	1
Account 38	1
Account 39	1
Account 40	1
Account 41	1
Account 42	1
Account 43	1
Account 44	1
Account 45	1
Account 46	1
Account 47	1
Account 48	1
Account 49	1
Account 50	1
Account 51	1
Account 52	1
Account 53	1
Account 54	1
Account 55	1
Account 56	1
Account 57	1
Account 58	1
Account 59	1
Account 60	1
Account 61	1
Account 62	1
Account 63	1
Account 64	1
Account 65	1
Account 66	1
Account 67	1
Account 68	1
Account 69	1
Account 70	1
Account 71	1
Account 72	1

Usage

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

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

<ContourIslandsCard title="Customer activity" data={customerCloud} label="account" x="sessions" y="actions" />

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. surface="ghost" controls only the visual frame. See Card composition.

Data

One uniquely named observation per row. A Gaussian kernel estimates density on a fixed grid; contour levels are fractions of the peak density in this view. Contours show an estimate, never an exact count or a geographic boundary. Dots preserve measured x and y with a decorative vertical lift onto their terrace. Missing coordinates remain in the accessible table but have no position. Weights are optional and nonnegative; zero contributes no density. Without weights, the headline counts located observations.

const customerCloud = [
  { account: 'A', sessions: 28, actions: 38, seats: 4 },
  { account: 'B', sessions: 78, actions: 70, seats: 2 },
];

Props

Every prop ContourIslandsCard 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 320. Dense data can expand or scroll to preserve geometry.
`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.
`aggregate`	`'sum' \| 'mean' \| 'max'`	Resting headline summary; Strip defaults to mean, the others to sum.
`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.
`x`	`numeric key of Row`	Horizontal coordinate.
`y`	`numeric key of Row`	Vertical coordinate.
`label`	`text key of Row`	Unique observation name.
`weight`	`numeric key of Row`	Optional nonnegative density weight; omitted means one per observation.
`bandwidth`	`number`	Kernel width as a fraction of each axis span, 0.04 to 0.25, default 0.1.
`levels`	`number`	Number of contour terraces, 3 to 9, default 6.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.

Customer activity

Observation

Value

Account 01

Account 02

Account 03

Account 04

Account 05

Account 06

Account 07

Account 08

Account 09

Account 10

Account 11

Account 12

Account 13

Account 14

Account 15

Account 16

Account 17

Account 18

Account 19

Account 20

Account 21

Account 22

Account 23

Account 24

Account 25

Account 26

Account 27

Account 28

Account 29

Account 30

Account 31

Account 32

Account 33

Account 34

Account 35

Account 36

Account 37

Account 38

Account 39

Account 40

Account 41

Account 42

Account 43

Account 44

Account 45

Account 46

Account 47

Account 48

Account 49

Account 50

Account 51

Account 52

Account 53

Account 54

Account 55

Account 56

Account 57

Account 58

Account 59

Account 60

Account 61

Account 62

Account 63

Account 64

Account 65

Account 66

Account 67

Account 68

Account 69

Account 70

Account 71

Account 72

Data

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 320. Dense data can expand or scroll to preserve geometry.

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.

aggregate

'sum' | 'mean' | 'max'

Resting headline summary; Strip defaults to mean, the others to sum.

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.

x

numeric key of Row

Horizontal coordinate.

y

numeric key of Row

Vertical coordinate.

label

text key of Row

Unique observation name.

weight

numeric key of Row

Optional nonnegative density weight; omitted means one per observation.

bandwidth

number

Kernel width as a fraction of each axis span, 0.04 to 0.25, default 0.1.

levels

number

Number of contour terraces, 3 to 9, default 6.

onKeyDown

KeyboardEventHandler<HTMLElement>

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

Chart style

Palette

Theme

Appearance

Reading & motion

Usage

Data

Props

Chart style

Palette

Theme

Appearance

Reading & motion

Contour islands

Usage

Data

Props