Chart No Data
The axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Chart No Data
*
* A panel with no numbers in it should still look like a chart. The axes
* extend from the origin, the gridlines fade in behind them, a flat
* dashed baseline runs left to right where the series would be, and onlyAbout this pattern
A blank rectangle where a chart should be reads as a failure; a chart with an honest zero in it reads as an answer. The value axis extends up from the origin, the time axis runs right from the same corner, gridlines and tick labels fade in behind them, and a flat dashed baseline crosses where the series would have been. Only then does the message arrive, so the reader takes in the shape and the range before being told the range is empty. Nothing springs — a measurement that overshoots its own end point and settles back is not a measurement.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Analytics view
A range with no sessions keeps its axes and scale rather than blanking the card.
Related patterns
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Deleted Item TombstoneA removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.
- Empty FolderAn empty folder assembles its own invitation: the folder outline draws itself, one dashed ghost sheet rises out of it on a single soft spring and holds still.