Numbers and charts in motion

A chart in a video is not a chart on a page. The viewer can't pause, re-read or hover, so every chart must answer one question, reveal it in the order it is spoken, and point at the answer. All numeric blocks are drawn natively by the renderer from validated props, so values, scales and sources are exactly what the storyboard says; run pnpm cf blocks NAME for exact props.

Several figures in one line of narration ("14% clicked, 3% typed a password, 22% reported"): use a canvas chart and give each value say, the word that names it. kind: "number" then steps through the values as each is spoken (the figure, its label and its bar change together on one scale); kind: "bars" grows each bar on its word. One still number under three spoken figures reads as a slide. In consecutive canvas beats the same values morph (a number into its bar).

Pick the form

Don't use: 3D, dual axes, radar charts, word clouds, or tables with more than four rows in motion. Use matrix for qualitative comparison grids.

Choreography: build it in the order you say it

1. Frame: the header rises; axes, baselines and gridlines draw first.
2. Data: bars grow, lines draw, segments sweep, timed to the clause that describes them with growSay, drawSay or land (an exact spoken word, or local seconds).
3. Focus: dim what is not the story (bars.focus with authored dim and dur, matrix.highlight) and mark the point (focus.note, annotate pins).
4. Takeaway: the answering number or sentence lands on its word and holds at least two seconds.

Every counter and bar settles on the exact authored value. check fails a final render when a beat ends before its numbers finish counting (drafts warn), because the true figure would never be on screen. Extend the beat or cue earlier.

Honesty rules

• Bars start at zero. Always. Negative bars are rejected; use delta or an explicit line domain for signed change.
• Line domains may be tighter than zero, but they are explicit (min, max) and every data point must lie inside them. Tick labels are round values inside the domain, never rounded-off odd steps.
• Same scale when comparing, or split the chart. When one value would be invisible next to another, use magnitude (area) or give each its own chart with its own labelled scale.
• Units on every number (%, ×, $, days, ms), and an as-of date or period in props.source on every data scene.
• Consistent precision: decimals is inferred from the data; set it explicitly when the source supports less.
• Animate from a true baseline: a count may start at 0; a rate that moved from 4.1% to 4.3% should use from: 4.1.
• Label hypothetical or illustrative data as such, on screen. Playbook samples already say so; replace them.
• Derived figures (funnel step rates, donut shares) are computed from your inputs; the inputs still need a source.
• A highlight is never the size and place of a data mark. A pale full-height box behind one column reads as another bar. Highlight with the axis label, a tint of the mark itself, or the camera.
• Check that the parts reconcile before you chart them together (sleeve returns × weights against the total, segments against the whole). If the source's own figures do not add up, show them separately and flag it to the person; a reviewer from the committee does that sum in seconds.
• In a financial film, land a figure rather than count up to it: a count shows every value on the way (+1.7% on its way to +2.1%), and each frame of it is a figure on screen that the source never states.

Labels and color

• Direct labels, not legends, except donut, whose legend doubles as the data table.
• Context is neutral (muted, hairlines); the story is the accent. accent2 is for a genuinely second series.
• Positive/negative colors appear only when better states which direction is good, and always alongside a sign.

Numbers

• Counters use Inter's own tabular figures, so digits never jitter and the suffix settles in place.
• Format for speech and sight: 1.2M, 37.8×, 30%, $4.5B, 2.4 s — never 1,234,567.89 in motion.
• A number plus a two-to-five word label; context goes in context/support, not in the figure.

Bind figures to sources

Never type figures from memory. Put them in block props and record each in storyboard.sources with { claim, source, asOf }; the visible props.source is required for every numeric block. Before delivery, check that every number in the narration appears in the props and the sources (see the integrity skill).