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

Chart composition, analytical layouts and shared interactions. Find a topic by name or by the export you are using.

23 topics

Core

Cards, the chart root and plot, data rules, composition and small plots.

  • CardsFinished cards that take your rows and field names: the quickest way to a chart.AreaChartCardLineChartCardBarChartCardStatCardChartCard
  • Runtime and layoutCompose a Cartesian chart yourself: one root, one plot, and the marks inside it.ChartChartPlotuseCartesianChartModeluseChartState
  • Data and identityAccessor rules, gaps versus zero, category identity, and the server-safe entry.@lilt-ui/charts/dataCategoryXConfigsummarizeRangetoChartCsv
  • ToolkitOptional toolbar, readout, overview and tooltip siblings, and comparison results.ChartToolbarChartReadoutChartOverviewuseChartComparison
  • Value legendsLegends that show inspected values, inspect on hover and pin on click.LegendValueLegend
  • Composition contractsThe tooltip slot, the inspected series, and how bars and stacks share a plot.TooltipinspectionSeriesrenderContentbarsstack
  • Small and fixed-height plotsFit inspection, pins and keyboard hints inside a dashboard widget’s allocation.TooltipadaptivedensitycompactHeight

Appearance & motion

Series styling, semantic marks, availability and animated values.

  • AppearanceSeries descriptors for color, line, area and bar marks, and --lilt-* tokens.ChartSeriesGrid--lilt-*
  • Semantic marksTreatments, reading status, step curves, companion fields and per-row color.series.fieldsseries.colorAtIntervalBandRangeBarErrorBarBoxPlot
  • Availability and motionLoading, empty and error status, entrances, resets and reduced motion.statusemptyChartEmptymotionanimateInresetKey
  • Animated numbersSix ways for a value to change, always read out as the exact number.AnimatedNumbernumberStylerenderValue

Chart families

What each family accepts and the parts it lets you replace.

  • Vertical barsGrouped and stacked bars on a shared zero baseline, with lines over the stack.BarChartPlot barsstack
  • Stacked areaSum and percent stacks with original values in every readout.ChartPlot stackAreaLine
  • Combo chartsBars and lines on one plot, with an optional secondary scale.ComboChartCardBarLinescale: 'secondary'
  • Stat cards and sparklinesOne metric with a sparkline, bars, a meter or a ring.StatCardStatCardChart
  • Horizontal barsRanked categories keyed by identity while values and order change.HorizontalBarChartCard
  • Category and radial chartsCategory x on the shared chart, and shares, progress and rhythm in polar geometry.RadialChartCardProgressCardActivityRingCardChart
  • Funnels and heatmapsCumulative stages with honest conversion, and matrices with fixed color domains.FunnelChartCardHeatmapChartCardsummarizeFunnelStages
  • Scatter, flow and profile chartsPoints, conserved flows, profiles and before-and-after pairs.ScatterChartCardSankeyChartCardRadarChartCardSlopeChartCard
  • FinanceCandles, indicators, price, depth, order book and portfolio from their own entry.@lilt-ui/charts/financeCandlestickChartCardCandlesOrderBook

Interaction & export

Controlled selection, brushing and static output.

  • Dashboard selection and exportSelections you own, linked charts, range summaries and CSV.selectedselectedCategoryIdcreateChartControllerChartRangeSummary
  • Range brushChoose and refine an interval on an overview without resampling.ChartBrushbrush
  • Static SVG exportA captioned, self-contained SVG of a settled plot.serializeChartSvg

Current limits

One active plot belongs to a Cartesian chart root. Line and Area marks draw long series from each pixel column's first, last, lowest and highest observation (decimate, on by default); hover, values, range summaries and exports still read every observation, and other Cartesian marks use the full series. Decimation selects original observations without averaging them. Card summaries and statistical families calculate the aggregates described on their own pages. Radial charts do not expose Cartesian range operations.