Motion & accessibility
Marks, axes and text move together. Each transition keeps the data legible and follows your motion preferences.
- Standard entrance
- 720ms
- Sparkline entrance
- 520ms
- Data update
- 420ms
- Before a skeleton shows
- 120ms
Motion
How charts arrive, wait for data, change and settle.
Visitors
Entrances
Lines and areas arrive through a soft-edged sweep, with the fill following the stroke. Bars grow from their baseline with a short, bounded stagger. Grid and axis labels share the same entrance clock. The standard entrance lasts 720ms; sparklines use 520ms.
Set animateIn={false} to skip the entrance while keeping interactive and data-update motion. Use motion="none" to settle all chart movement.
Orders
Loading
Fast data skips the placeholder. When loading lasts longer than 120ms, the chart reserves its final space and shows a skeleton shaped for its chart: contours, bars or stacked layers, with a shared sheen. The real layer begins under the skeleton when data arrives.
Orders this year
Updates
Matched dates and gaps interpolate together over 420ms. A changed gap topology uses a shorter two-layer crossfade. Summary and inspection text use bounded outgoing/incoming slots: values do not count through fabricated measurements or queue a stack of old glyphs.
Turn it on, then replay, load and update the demos on this page.
Your system preference: no preferenceReduced motion
The system preference is live. Springs, reveals, sheen and bounded text settle immediately while unknown data remains a steady skeleton. Theme changes preserve the chart identity and selected sample.
Interaction & access
Reading a chart by pointer, by keyboard, and across a range.
Revenue
Hover and pinning
Move over an interactive plot to inspect a point, category, or time period. The chart highlights what you are reading and updates its readout. Click to pin a selection so it stays visible when the pointer leaves; press Escape to release it.
Use the info button on each chart's main preview for its specific behavior. The Props table documents its readout options, and the Hover page lets you try the available styles.
Revenue
- ←
- →
- ↑
- ↓
- Enter
- Esc
Keyboard inspection
Tab to an interactive chart and use the arrow keys to explore its observations. On Cartesian charts, Left and Right move through periods; Up and Down select a series where supported. Other charts step through their rows, cells, spokes, or flows. Enter pins a selection and Escape releases it. The preview's info button explains any chart-specific controls and is also available by keyboard.
Revenue
Exploration sequence
Drag between two real observations to see values and change as the interval moves. Refine either endpoint after release, focus the interval, and use Full range to return with the answer intact. A chart controller can carry the same normalized x selection to related charts and preserve it when a host expands a chart. Series visibility, live following, annotations, reference bands and snapshot comparison are all opt-in.