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/Appearance & motion

Animated numbers

Six ways for a value to change, always read out as the exact number.

  • AnimatedNumber
  • numberStyle
  • renderValue

AnimatedNumber takes a numeric value, an optional format function or Intl.NumberFormat, and a variant: count (the default) counts the value itself, pop swaps the number with a small bounce, slide moves changed digits in the direction of change, roll turns each digit like an odometer, flow uses NumberFlow's spinning digits (it needs an Intl.NumberFormat, which cards supply), and scramble cycles figures before they land. Symbols such as a currency sign hold still, and every variant keeps moving while a pointer scrubs a chart. The accessible reading is always the exact value, motion="none" turns movement off, and reduced-motion preferences are respected automatically. Cards take the same choice as numberStyle. Legend values stay static unless you render one through renderValue.

TypeScript

import { AnimatedNumber, Legend } from '@lilt-ui/charts';

const currency = new Intl.NumberFormat('en-US', {
  style: 'currency', currency: 'USD', maximumFractionDigits: 0,
});

<AnimatedNumber value={55610} format={currency} />
<Legend model={model} renderValue={(entry) => entry.value === null
  ? 'No data'
  : <AnimatedNumber value={entry.value} format={currency} variant="roll" />
} />
PreviousAvailability and motionNextVertical bars