Area chart

ObservationLeft and Right inspect. Up and Down switch series. Escape clears.

Usage

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

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

<AreaChartCard
  title="Visitors"
  data={visitors}
  x="month"
  series={[{ key: 'organic' }, { key: 'referral' }, { key: 'paid' }]}
/>

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

Pass your rows as they are. x and each series key name fields on the row, and TypeScript rejects keys that don’t exist or aren’t numbers. Totals, tiles, and hover values are derived. null is a gap, not zero. With stack="percent", each complete period fills to 100% and the headline and tiles read shares of the latest period; a missing, negative, or zero-total period becomes a gap across the whole stack.

// One row per x position, one numeric field per series.
const visitors = [
  { month: 'Jan', organic: 2400, referral: 400, paid: 800, target: 3000 },
  { month: 'Feb', organic: 2800, referral: 500, paid: 700, target: 3200 },
];

<AreaChartCard
  title="Visitors"
  data={visitors}
  x="month"                       // text, number, or Date field
  series={[
    { key: 'organic', label: 'Organic' },            // palette color
    { key: 'paid', label: 'Paid', color: '#8b5cf6' }, // or your own
    { key: 'target', label: 'Target', dashed: true },  // line only
  ]}
/>

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

<AreaChartCard
  title="Visitors"
  x="month"
  series={series}
  ranges={[
    { id: 'year', label: 'This year', data: thisYear, delta: 0.184 },
    { id: 'last-year', label: 'Last year', data: lastYear, delta: 0.062 },
  ]}
/>

Streamgraph

A centered stream shows changing channel composition. Thickness carries the measurement; dots inspect supplied readings. Missing contributions break the whole period. 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 { StreamgraphCard } from '@lilt-ui/charts';

<StreamgraphCard
  title="Acquisition mix"
  data={channelMix}
  x="week"
  series={[
    { "key": "organic", "label": "Organic" },
    { "key": "referral", "label": "Referral" },
    { "key": "paid", "label": "Paid" },
    { "key": "direct", "label": "Direct" },
  ]}
/>

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.
`x`	`x key of Row`	Unique ordered period. Strings follow input order; numeric/date positions preserve spacing.
`series`	`CardSeries<Key>[]`	Nonnegative layers.
`curve`	`'smooth' \| 'linear'`	Basis interpolation (default) or straight boundaries.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.

Props

Every prop AreaChartCard 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.
`data`	`Row[]`	One row per x position. Omit when using ranges.
`x`	`key of Row`	Text, number, or Date field for the x axis.
`series`	`{ key, label?, color?, dashed? }[]`	Numeric fields to plot, checked against your row type. Dashed series are references left out of the headline.
`stack`	`boolean \| 'percent'`	Stack the areas: `true` adds them, `percent` shows shares. Omit to overlap them. Dashed series stay lines over the stack.
`curve`	`'smooth' \| 'linear'`	Monotone spline or straight segments.
`bleed`	`boolean`	Run areas to the card edges with a soft fade. Defaults to true.
`pillValue`	`'series' \| 'stack'`	In stacks, show a series’ own value (default) or its stacked height.
`depth`	`boolean`	Draws each line as a lit tube with a soft shadow over its fade. Every point reads where the flat line puts it.
`decimate`	`boolean`	Draw a long series from each pixel column’s first, last, lowest and highest point, so tens of thousands of points stay fast. Hover, tiles and exports still read every row. Defaults to true.
`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.
`delta`	`number`	Fractional change for the chip: 0.082 shows +8.2%.
`deltaTone`	`'default' \| 'inverse' \| 'neutral'`	Use inverse when a decrease is good.
`headline`	`number`	Resting headline. Defaults to the aggregate of non-reference series; dashed series are excluded.
`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 data.
`valueFormat`	`Intl.NumberFormatOptions`	Formats the headline, tiles, and axis, e.g. currency.
`tiles`	`boolean`	Per-series value tiles. Defaults to true; false hides the legend.
`legend`	`false \| 'tiles' \| 'inline' \| 'list' \| 'pills' \| 'bars'`	False removes the legend without changing the data. How the legend under the plot lays out: value tiles (default), a compact inline key, list rows, tinted pills, or bars that also draw each value against the largest.
`legendSwatch`	`'square' \| 'dot' \| 'line'`	The mark beside each legend label. Defaults to a rounded square.
`height`	`number`	Plot height in pixels. Defaults to 240.
`axis`	`'minimal' \| 'dots' \| 'inline' \| 'ruler' \| 'classic' \| 'segmented' \| { x, y }`	Axis preset. Minimal (default) labels only the x ends and has no grid. Set one per axis with `{ x, y }`; a segmented axis can take a `gradient` to read as a range.
`hover`	`'pills' \| 'tooltip' \| 'strip' \| 'headline'`	The one readout for the hovered point: pills on the axes (default), a tooltip with every series, a strip docked above the plot, or the headline and tiles alone.
`hoverStyle`	`'soft' \| 'solid' \| 'accent'`	How the pills or tooltip look. Soft (default) is surface glass; accent tints it with the hovered series.
`pillSeries`	`'nearest' \| 'total' \| key`	Which series the y pill reads and the tooltip leads with. Nearest (default) follows the pointer.
`pillPosition`	`'auto' \| 'mark' \| 'axis'`	Where the value pill sits: above the hovered mark, or on the y axis. Auto picks mark when there are no y labels.
`tooltipIndicator`	`'square' \| 'dot' \| 'line'`	Series marker on each tooltip row, with hover="tooltip". Square by default.
`background`	`'dots' \| 'grid' \| 'lines' \| 'none'`	Texture behind the marks. Dots by default, with a hover spotlight.
`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.
`axisInset`	`number`	Padding between the plot edges and axis labels or pills.
`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.
`compare`	`boolean \| 'headline' \| 'badge'`	Drag across the plot to compare two points in time. True or headline reads the change in the headline; badge reads it in the card’s tab and leaves the headline at rest.
`target`	`number \| { value, label? }`	A goal each point should reach: a labeled line, a “vs target” chip on hover, and a count of points on target at rest.
`forecast`	`{ from, lower?, upper?, label?, bands?: { lower, upper, label }[] }`	Rows from `from` onward are projections: dotted and excluded from the headline. Supply lower/upper for one envelope, or bands ordered widest to narrowest for a fan on Line and unstacked Area. Every bound is inspectable; no forecast is estimated.
`sync`	`string`	Link hover and pins with every card that uses the same name, matched by x value. A click pins them all, with a ghost pin on the others; Alt-click pins one card only.
`numberStyle`	`'count' \| 'pop' \| 'slide' \| 'roll' \| 'flow' \| 'scramble'`	How the headline animates when its value changes. Count (default) counts to the new value.
`motion`	`'auto' \| 'none'`	None turns off decorative motion; reduced motion does this automatically.
`aggregate`	`'sum' \| 'mean' \| 'last' \| 'max'`	Summary at rest: sum for counts, mean for rates, last for levels, or max for peaks. Area defaults to sum; Range defaults to mean.
`headlineSeries`	`key of Row`	Numeric series whose value drives the headline instead of the combined total.
`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.
`formatAxisValue`	`(value: number) => string`	Custom compact axis value text.
`formatX`	`(value: string \| number \| Date) => string`	Custom x label text.
`xType`	`'category' \| 'number' \| 'time'`	Override inferred x type. Use time for numeric Unix timestamps in milliseconds.
`spotlight`	`boolean`	Highlight the inspected position in the plot background. Defaults to true.
`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.

Data

// One row per x position, one numeric field per series. const visitors = [ { month: 'Jan', organic: 2400, referral: 400, paid: 800, target: 3000 }, { month: 'Feb', organic: 2800, referral: 500, paid: 700, target: 3200 }, ]; <AreaChartCard title="Visitors" data={visitors} x="month" // text, number, or Date field series={[ { key: 'organic', label: 'Organic' }, // palette color { key: 'paid', label: 'Paid', color: '#8b5cf6' }, // or your own { key: 'target', label: 'Target', dashed: true }, // line only ]} />

<AreaChartCard title="Visitors" x="month" series={series} ranges={[ { id: 'year', label: 'This year', data: thisYear, delta: 0.184 }, { id: 'last-year', label: 'Last year', data: lastYear, delta: 0.062 }, ]} />

Streamgraph

import { StreamgraphCard } from '@lilt-ui/charts'; <StreamgraphCard title="Acquisition mix" data={channelMix} x="week" series={[ { "key": "organic", "label": "Organic" }, { "key": "referral", "label": "Referral" }, { "key": "paid", "label": "Paid" }, { "key": "direct", "label": "Direct" }, ]} />

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.

x

x key of Row

Unique ordered period. Strings follow input order; numeric/date positions preserve spacing.

series

CardSeries<Key>[]

Nonnegative layers.

curve

'smooth' | 'linear'

Basis interpolation (default) or straight boundaries.

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.

data

Row[]

One row per x position. Omit when using ranges.

x

key of Row

Text, number, or Date field for the x axis.

series

{ key, label?, color?, dashed? }[]

Numeric fields to plot, checked against your row type. Dashed series are references left out of the headline.

stack

boolean | 'percent'

Stack the areas: `true` adds them, `percent` shows shares. Omit to overlap them. Dashed series stay lines over the stack.

curve

'smooth' | 'linear'

Monotone spline or straight segments.

bleed

boolean

Run areas to the card edges with a soft fade. Defaults to true.

pillValue

'series' | 'stack'

In stacks, show a series’ own value (default) or its stacked height.

depth

boolean

Draws each line as a lit tube with a soft shadow over its fade. Every point reads where the flat line puts it.

decimate

boolean

Draw a long series from each pixel column’s first, last, lowest and highest point, so tens of thousands of points stay fast. Hover, tiles and exports still read every row. Defaults to true.

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.

delta

number

Fractional change for the chip: 0.082 shows +8.2%.

deltaTone

'default' | 'inverse' | 'neutral'

Use inverse when a decrease is good.

headline

number

Resting headline. Defaults to the aggregate of non-reference series; dashed series are excluded.

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 data.

valueFormat

Intl.NumberFormatOptions

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

tiles

boolean

Per-series value tiles. Defaults to true; false hides the legend.

legend

False removes the legend without changing the data. How the legend under the plot lays out: value tiles (default), a compact inline key, list rows, tinted pills, or bars that also draw each value against the largest.

legendSwatch

'square' | 'dot' | 'line'

The mark beside each legend label. Defaults to a rounded square.

height

number

Plot height in pixels. Defaults to 240.

axis

'minimal' | 'dots' | 'inline' | 'ruler' | 'classic' | 'segmented' | { x, y }

Axis preset. Minimal (default) labels only the x ends and has no grid. Set one per axis with `{ x, y }`; a segmented axis can take a `gradient` to read as a range.

hover

'pills' | 'tooltip' | 'strip' | 'headline'

The one readout for the hovered point: pills on the axes (default), a tooltip with every series, a strip docked above the plot, or the headline and tiles alone.

hoverStyle

'soft' | 'solid' | 'accent'

How the pills or tooltip look. Soft (default) is surface glass; accent tints it with the hovered series.

pillSeries

'nearest' | 'total' | key

Which series the y pill reads and the tooltip leads with. Nearest (default) follows the pointer.

pillPosition

'auto' | 'mark' | 'axis'

Where the value pill sits: above the hovered mark, or on the y axis. Auto picks mark when there are no y labels.

tooltipIndicator

'square' | 'dot' | 'line'

Series marker on each tooltip row, with hover="tooltip". Square by default.

background

'dots' | 'grid' | 'lines' | 'none'

Texture behind the marks. Dots by default, with a hover spotlight.

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.

axisInset

number

Padding between the plot edges and axis labels or pills.

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

compare

boolean | 'headline' | 'badge'

Drag across the plot to compare two points in time. True or headline reads the change in the headline; badge reads it in the card’s tab and leaves the headline at rest.

target

number | { value, label? }

A goal each point should reach: a labeled line, a “vs target” chip on hover, and a count of points on target at rest.

forecast

{ from, lower?, upper?, label?, bands?: { lower, upper, label }[] }

Rows from `from` onward are projections: dotted and excluded from the headline. Supply lower/upper for one envelope, or bands ordered widest to narrowest for a fan on Line and unstacked Area. Every bound is inspectable; no forecast is estimated.

sync

string

Link hover and pins with every card that uses the same name, matched by x value. A click pins them all, with a ghost pin on the others; Alt-click pins one card only.

numberStyle

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

motion

'auto' | 'none'

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

aggregate

'sum' | 'mean' | 'last' | 'max'

Summary at rest: sum for counts, mean for rates, last for levels, or max for peaks. Area defaults to sum; Range defaults to mean.

headlineSeries

key of Row

Numeric series whose value drives the headline instead of the combined total.

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.

formatAxisValue

(value: number) => string

Custom compact axis value text.

formatX

(value: string | number | Date) => string

Custom x label text.

xType

'category' | 'number' | 'time'

Override inferred x type. Use time for numeric Unix timestamps in milliseconds.

spotlight

boolean

Highlight the inspected position in the plot background. Defaults to true.

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

Streamgraph

Props

Chart style

Palette

Theme

Appearance

Reading & motion

Area chart

Usage

Data

Streamgraph

Props