Availability and motion
Loading, empty and error status, entrances, resets and reduced motion.
statusemptyChartEmptymotionanimateInresetKey
status accepts loading, ready or error. motion="none" settles finite movement immediately. The default is auto and follows reduced-motion preferences.
Entrances are enabled by default. Set animateIn={false} on Chart to show the first data immediately while keeping hover, visibility and data-update motion. Cards take motion and loadingStyle. Changing resetKey replays the entrance when enabled; ordinary updates do not. Reduced motion always takes precedence.
A period with no data shows the empty state in the plot area, and the headline reads a dash, never zero. empty takes dots (the default), the chart’s own shape, an element, or null for nothing. Both built-in looks stay still, so empty never reads as loading. ChartEmpty is the built-in look as a component, so your own words keep it.
TypeScript
<Chart aria-label="Revenue" data={rows} series={series} x={x} animateIn={false}>
<ChartPlot><Area series="revenue" /><Line series="revenue" /></ChartPlot>
</Chart>
TypeScript
import { AreaChartCard, ChartEmpty } from '@lilt-ui/charts';
<AreaChartCard data={[]} x="month" series={series} empty="shape" />
<AreaChartCard data={[]} x="month" series={series} empty={<ChartEmpty>No visits yet</ChartEmpty>} />
<AreaChartCard data={[]} x="month" series={series} empty={<ConnectSource />} />