Chart style

Applies to every chart.

Palette

Theme

Appearance

Depth
Surface
Background

Reading & motion

Axis
Hover
Legend
Numbers
Loading
Empty
Using chart defaults

Docs

Install, API and guides

  • Getting started

Reference2

  • API reference
  • Motion & accessibility
API reference/Core

Cards

Finished cards that take your rows and field names: the quickest way to a chart.

  • AreaChartCard
  • LineChartCard
  • BarChartCard
  • StatCard
  • ChartCard

Most charts start as a card. A card takes your rows and the names of their fields, and TypeScript checks each name against the row type: x and category must name text, number or date fields, and value or a series key must name a numeric one. The card provides a header, legend where applicable, hover readout, loading state and motion. Every chart page under Charts lists its card's full props and prints a complete, copyable component.

Titles are optional: omit title to render no visible title. Set header={false} to remove the entire header, including headline, delta and period controls. Where a card offers legend layouts, legend={false} removes the legend independently. Use aria-label for the accessible name when your app supplies the heading. surface="ghost" only changes the visual frame. Pass the selected rows through data when your app owns period selection.

A radial keeps its centre and slice interaction with both controls hidden. Tab to the graphic, use arrows to inspect, Enter or Space to pin, and Escape to clear. Escape also clears pins with every visible legend layout; controlled selection changes when your app accepts onSelectedChange(null).

From @lilt-ui/charts: AreaChartCard, LineChartCard, BarChartCard, ComboChartCard, StatCard, HorizontalBarChartCard, RadialChartCard, ProgressCard, ActivityRingCard, FunnelChartCard, HeatmapChartCard, ScatterChartCard, SankeyChartCard, RadarChartCard, SlopeChartCard, RangeChartCard and BoxPlotCard. Finance cards come from @lilt-ui/charts/finance.

Cards share one vocabulary: ranges swaps the data for a period select, delta and headline set the header, palette and surface restyle it, badge adds a glass tab, and loading, loadingStyle, empty and motion cover availability. Line, Area and Bar cards also take hover, sync, target, forecast and normal. To build a card of your own around a composed chart, use ChartCard with ChartCardHeader, ChartCardTitle, ChartCardValue, ChartCardDelta and ChartCardRange.

TypeScript

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' }]}
/>

TypeScript

<RadialChartCard
  aria-label="Revenue by channel"
  data={channels}
  category="channel"
  value="revenue"
  surface="ghost"
  header={false}
  legend={false}
  selected={selectedChannel}
  onSelectedChange={setSelectedChannel}
  center={({ share }) => <strong>{share === null ? '—' : Math.round(share * 100) + '%'}</strong>}
/>
NextRuntime and layout