Terrain

Higher and brighter: more · Hover to pin a reading

Server load
Observation	Value
00:00 · Mon	12%
02:00 · Mon	12%
04:00 · Mon	13%
06:00 · Mon	18%
08:00 · Mon	31%
10:00 · Mon	56%
12:00 · Mon	78%
14:00 · Mon	78%
16:00 · Mon	56%
18:00 · Mon	31%
20:00 · Mon	18%
22:00 · Mon	13%
00:00 · Tue	12%
02:00 · Tue	12%
04:00 · Tue	13%
06:00 · Tue	18%
08:00 · Tue	31%
10:00 · Tue	56%
12:00 · Tue	78%
14:00 · Tue	78%
16:00 · Tue	56%
18:00 · Tue	31%
20:00 · Tue	18%
22:00 · Tue	13%
00:00 · Wed	12%
02:00 · Wed	12%
04:00 · Wed	14%
06:00 · Wed	27%
08:00 · Wed	49%
10:00 · Wed	65%
12:00 · Wed	80%
14:00 · Wed	79%
16:00 · Wed	56%
18:00 · Wed	31%
20:00 · Wed	18%
22:00 · Wed	13%
00:00 · Thu	12%
02:00 · Thu	12%
04:00 · Thu	13%
06:00 · Thu	18%
08:00 · Thu	31%
10:00 · Thu	56%
12:00 · Thu	78%
14:00 · Thu	78%
16:00 · Thu	56%
18:00 · Thu	31%
20:00 · Thu	18%
22:00 · Thu	13%
00:00 · Fri	12%
02:00 · Fri	12%
04:00 · Fri	13%
06:00 · Fri	18%
08:00 · Fri	31%
10:00 · Fri	56%
12:00 · Fri	78%
14:00 · Fri	78%
16:00 · Fri	56%
18:00 · Fri	31%
20:00 · Fri	18%
22:00 · Fri	13%
00:00 · Sat	12%
02:00 · Sat	12%
04:00 · Sat	13%
06:00 · Sat	15%
08:00 · Sat	21%
10:00 · Sat	33%
12:00 · Sat	44%
14:00 · Sat	44%
16:00 · Sat	33%
18:00 · Sat	21%
20:00 · Sat	15%
22:00 · Sat	13%
00:00 · Sun	12%
02:00 · Sun	12%
04:00 · Sun	13%
06:00 · Sun	15%
08:00 · Sun	21%
10:00 · Sun	33%
12:00 · Sun	44%
14:00 · Sun	44%
16:00 · Sun	33%
18:00 · Sun	21%
20:00 · Sun	15%
22:00 · Sun	13%

Usage

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

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

<TerrainCard title="Server load" data={serverLoad} x="hour" y="day" value="load" />

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 row per x and y pair, at least two of each. The surface passes exactly through every reading and is smoothed between them; smoothing sets how many samples sit between neighbours. A missing reading sits on the floor and reads as no data. Duplicate pairs are rejected.

const serverLoad = [
  { day: 'Mon', hour: '00:00', load: 12 },
  { day: 'Mon', hour: '02:00', load: 14 },
  // …one row per day and hour
];

Props

Every prop TerrainCard 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 320px. 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.
`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`	`text key of Row`	Columns, running away to the right.
`y`	`text key of Row`	Rows, coming toward the viewer.
`value`	`numeric key of Row`	Surface height, color, and headline.
`rise`	`number`	How many cell lengths the highest value rises, default 3.
`smoothing`	`number`	Surface samples between neighbouring readings, 1 to 6, default 4.
`domain`	`[number, number]`	Fixed value domain that must contain every value. Defaults to zero through the largest.
`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