Heatmap

Mon
Tue
Wed
Thu
Fri
Sat
Sun
	00:00	02:00	04:00	06:00	08:00	10:00	12:00	14:00	16:00	18:00	20:00	22:00

Usage

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

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

<HeatmapChartCard
  title="Audience activity"
  data={weeklyActivity}
  x="hour"
  y="day"
  value="sessions"
/>

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

Each row is one cell: x names its column, y its row, and value sets its color; TypeScript rejects anything else. Rows and columns keep the order they first appear, or pass rows and columns to set it. A cell that is null, or has no row at all, is hatched and reads “No data”, while a measured zero gets the lightest tint, so a gap never passes for a quiet hour. The headline is the sum of every known cell; aggregate switches it to a mean or max for rates.

// One row per cell: which column, which row, and its value.
const weeklyActivity = [
  { day: 'Mon', hour: '00:00', sessions: 12 },
  { day: 'Mon', hour: '02:00', sessions: 0 },
  { day: 'Mon', hour: '10:00', sessions: null }, // not recorded
  // …
];

<HeatmapChartCard
  title="Audience activity"
  data={weeklyActivity}
  x="hour"          // a text field: the column
  y="day"           // a text field: the row
  value="sessions"  // a numeric field
/>

For a working period select, pass ranges. Each range brings its own data and delta.

<HeatmapChartCard
  title="Audience activity"
  x="hour"
  y="day"
  value="sessions"
  domain={[0, 500]} // one scale for both weeks
  ranges={[
    { id: 'week', label: 'This week', data: thisWeek, delta: 0.149 },
    { id: 'last-week', label: 'Last week', data: lastWeek, delta: -0.021 },
  ]}
/>

Correlation matrix

A symmetric Pearson matrix compares each metric with every other metric. Inspection retains both rows and columns and reports the number of complete pairs. Constant values are undefined, not zero correlation. All three loading styles share the skeleton exit, entrance, pointer/keyboard pinning, touch glide, reduced motion, and accessible readings table. Aggregate marks report null as their original datum.

import { CorrelationMatrixCard } from '@lilt-ui/charts';

<CorrelationMatrixCard
  title="Campaign relationships"
  data={campaignMetrics}
  metrics={[
    { "key": "spend", "label": "Spend" },
    { "key": "visits", "label": "Visits" },
    { "key": "orders", "label": "Orders" },
    { "key": "churn", "label": "Churn" },
    { "key": "latency", "label": "Latency" },
  ]}
/>

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 260. Dense lanes expand to keep every mark visible.
`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.
`legend`	`false \| 'tiles' \| 'inline' \| 'list' \| 'pills' \| 'bars'`	Legend layout; false hides it. Correlation defaults to false.
`legendSwatch`	`'square' \| 'dot' \| 'line'`	Legend marker, square by default.
`metrics`	`CardSeries<Key>[]`	At least two distinct numeric metrics.
`minPairs`	`number`	Minimum complete pairs for a coefficient, default 3.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.

Calendar heatmap

CalendarHeatmapCard lays out one UTC day per cell. Bounds default to the observed dates. Duplicate days are rejected; aggregate them first. Zero stays tinted, absent days are hatched, and unobserved days after today are outlined. Wide calendars scroll on narrow screens. All loading styles fade out through the shared skeleton lifecycle.

import { CalendarHeatmapCard } from '@lilt-ui/charts';

<CalendarHeatmapCard data={calendarActivity} date="date" value="visits" from="2026-07-01" to="2026-10-10" today="2026-09-30" />

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 260. Dense lanes expand to keep every mark visible.
`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.
`date`	`date, string, or numeric key of Row`	UTC date per cell; numbers are milliseconds since the Unix epoch.
`value`	`numeric key of Row`	Cell intensity and headline value.
`from`	`string \| number \| Date`	Inclusive UTC bounds. Defaults to first and last observed dates; at most ten years.
`to`	`string \| number \| Date`	Inclusive UTC bounds. Defaults to first and last observed dates; at most ten years.
`today`	`string \| number \| Date`	UTC cutoff for future cells; defaults to today.
`weekStartsOn`	`0 \| 1`	Sunday (0) or Monday (1, default).
`domain`	`[number, number]`	Fixed intensity domain that must contain every value.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.

Props

Every prop HeatmapChartCard 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 cell. Omit when using ranges.
`x`	`text key of Row`	Places each cell in a column.
`y`	`text key of Row`	Places each cell in a row.
`value`	`numeric key of Row`	Sets the color. `null`, or a cell with no row, reads “No data”.
`columns`	`string[]`	Column order. Defaults to the order columns first appear.
`rows`	`string[]`	Row order. Defaults to the order rows first appear.
`domain`	`[number, number]`	Values at the light and dark ends of the scale. Fix it to compare periods; defaults to zero through the highest value.
`aggregate`	`'sum' \| 'mean' \| 'max'`	How the resting headline sums up the cells. Sum by default.
`height`	`number`	Grid height in pixels, shared by the rows. Defaults to 30 per row.
`radius`	`number`	Cell corner radius in pixels. Defaults to 5; 0 gives square cells.
`gap`	`number`	Space between cells in pixels. Defaults to 4.
`headline`	`number`	Resting headline. Defaults to the aggregate of every known cell.
`delta`	`number`	Fractional change for the chip.
`deltaTone`	`'default' \| 'inverse' \| 'neutral'`	Use inverse when a decrease is good.
`range`	`string`	Static period label in the header.
`ranges`	`{ id, label, data, delta?, headline? }[]`	Turns the period label into a select. Each range swaps the cells.
`color`	`string`	Any CSS color for the dark end of the scale.
`depth`	`boolean`	Raises every cell as a low tile of one height with a lit top. Color alone still carries the value.
`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.
`defaultRange`	`string`	Initial range id; defaults to the first supplied range.
`locale`	`string`	Locale used for number formatting. Defaults to en-US.
`formatValue`	`(value: number) => string`	Custom value text, taking precedence over valueFormat.
`badge`	`ReactNode`	Content in the tab above the card. A comparison badge can replace this while a comparison is active.
`className`	`string`	Additional class on the card frame.
`style`	`CSSProperties \| ChartStyle`	Inline styles and scoped --lilt-* chart variables.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

00:00

02:00

04:00

06:00

08:00

10:00

12:00

14:00

16:00

18:00

20:00

22:00

Data

// One row per cell: which column, which row, and its value. const weeklyActivity = [ { day: 'Mon', hour: '00:00', sessions: 12 }, { day: 'Mon', hour: '02:00', sessions: 0 }, { day: 'Mon', hour: '10:00', sessions: null }, // not recorded // … ]; <HeatmapChartCard title="Audience activity" data={weeklyActivity} x="hour" // a text field: the column y="day" // a text field: the row value="sessions" // a numeric field />

<HeatmapChartCard title="Audience activity" x="hour" y="day" value="sessions" domain={[0, 500]} // one scale for both weeks ranges={[ { id: 'week', label: 'This week', data: thisWeek, delta: 0.149 }, { id: 'last-week', label: 'Last week', data: lastWeek, delta: -0.021 }, ]} />

Correlation matrix

import { CorrelationMatrixCard } from '@lilt-ui/charts'; <CorrelationMatrixCard title="Campaign relationships" data={campaignMetrics} metrics={[ { "key": "spend", "label": "Spend" }, { "key": "visits", "label": "Visits" }, { "key": "orders", "label": "Orders" }, { "key": "churn", "label": "Churn" }, { "key": "latency", "label": "Latency" }, ]} />

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 260. Dense lanes expand to keep every mark visible.

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.

legend

Legend layout; false hides it. Correlation defaults to false.

legendSwatch

'square' | 'dot' | 'line'

Legend marker, square by default.

metrics

CardSeries<Key>[]

At least two distinct numeric metrics.

minPairs

number

Minimum complete pairs for a coefficient, default 3.

onKeyDown

KeyboardEventHandler<HTMLElement>

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

Calendar heatmap

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 260. Dense lanes expand to keep every mark visible.

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

motion

'auto' | 'none'

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

date

date, string, or numeric key of Row

UTC date per cell; numbers are milliseconds since the Unix epoch.

value

numeric key of Row

Cell intensity and headline value.

from

string | number | Date

Inclusive UTC bounds. Defaults to first and last observed dates; at most ten years.

to

string | number | Date

Inclusive UTC bounds. Defaults to first and last observed dates; at most ten years.

today

string | number | Date

UTC cutoff for future cells; defaults to today.

weekStartsOn

0 | 1

Sunday (0) or Monday (1, default).

domain

[number, number]

Fixed intensity domain that must contain every value.

onKeyDown

KeyboardEventHandler<HTMLElement>

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

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 cell. Omit when using ranges.

x

text key of Row

Places each cell in a column.

y

text key of Row

Places each cell in a row.

value

numeric key of Row

Sets the color. `null`, or a cell with no row, reads “No data”.

columns

string[]

Column order. Defaults to the order columns first appear.

rows

string[]

Row order. Defaults to the order rows first appear.

domain

[number, number]

Values at the light and dark ends of the scale. Fix it to compare periods; defaults to zero through the highest value.

aggregate

'sum' | 'mean' | 'max'

How the resting headline sums up the cells. Sum by default.

height

number

Grid height in pixels, shared by the rows. Defaults to 30 per row.

radius

number

Cell corner radius in pixels. Defaults to 5; 0 gives square cells.

gap

number

Space between cells in pixels. Defaults to 4.

headline

number

Resting headline. Defaults to the aggregate of every known cell.

delta

number

Fractional change for the chip.

deltaTone

'default' | 'inverse' | 'neutral'

Use inverse when a decrease is good.

range

string

Static period label in the header.

ranges

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

Turns the period label into a select. Each range swaps the cells.

color

string

Any CSS color for the dark end of the scale.

depth

boolean

Raises every cell as a low tile of one height with a lit top. Color alone still carries the value.

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

motion

'auto' | 'none'

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

defaultRange

string

Initial range id; defaults to the first supplied range.

locale

string

Locale used for number formatting. Defaults to en-US.

formatValue

(value: number) => string

Custom value text, taking precedence over valueFormat.

badge

ReactNode

Content in the tab above the card. A comparison badge can replace this while a comparison is active.

className

string

Additional class on the card frame.

style

CSSProperties | ChartStyle

Inline styles and scoped --lilt-* chart variables.

Chart style

Palette

Theme

Appearance

Reading & motion

Usage

Data

Correlation matrix

Calendar heatmap

Props

Chart style

Palette

Theme

Appearance

Reading & motion

Heatmap

Usage

Data

Correlation matrix

Calendar heatmap

Props