Charts & metrics
Also searched as: data storytelling, animated charts, bar chart race, count-up, data story, metrics
Canonical Definition
Data storytelling is the animated revelation of charts, metric count-ups, and graphs in sequential narrative order, guiding the viewer from premise to statistical conclusion.
45 to 90 frames for the growth phase; 60 frames dwell time
cubic-bezier(0.16, 1, 0.3, 1) for count-ups and bar growth
A static chart displays all data points at once, forcing the viewer to hunt for the key takeaway. An animated chart controls the argument: axes draw first, baselines establish context, and the hero metric grows dramatically past competitors.
In code-based video, charts are driven by real numeric datasets (JSON/CSV), automatically interpolating heights, arcs, and counter values without manual keyframing.
Count-Up Counters & Metric Highlights
Rolling numbers from zero to final milestone with exponential deceleration
A large metric counter rolls rapidly before easing into the final figure with formatted commas, currency symbols, and percentage badges.
How this works: A high-impact metric count-up rolling from 0 to 10M with realistic deceleration.
- Continuous numeric interpolation using `interpolate()`
- Configurable locale formatting (currency, commas, percentage)
- Accompanied by expanding progress rings and stat badges
Animated Bar Charts & Chart Stories
Growing comparison bars in sequence to emphasize leadership
Bars grow upward or outward from a common baseline, with staggered delays that make the winning metric land with finality.
How this works: A modern bar chart animating height transitions with floating value tags.
- Staggered bar height reveals with spring elasticity
- Automatic Y-axis scale recalculation
- Data-driven props: change the JSON array to re-render in seconds
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Ensure axes, baseline rules, and category labels appear before the data values begin growing.
- Keep metric count-up durations under 2 seconds so the final number is visible during voiceover.
Common Failure Modes (What to avoid)
- Animating all bars at the exact same instant: staggered growth makes individual differences readable.
- Count-ups that stop abruptly without decelerating, making the final number feel clipped.
Working catalog implementations
Typed Remotion components ready to drop into code.
Animated Bar Chart
A compact data card with deterministic bar growth and value callouts.
Bar Chart Race
Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads
Count Up
A token-native stat counter that eases between values and lands with a restrained scale pulse.
Chart Story
One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.
Build charts & metrics in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Diagrams & flows
Animated diagrams are structural process visualizations — flowcharts, architecture pipelines, decision trees, and connected node graphs — that illuminate systemic relationships.
Motion FundamentalsProgrammatic video & video-as-code
Programmatic video is video authored as software code — using React, TypeScript, and deterministic time functions — so each frame is produced by code and can be rendered at scale with dynamic data.
Motion FundamentalsTiming, spacing & rhythm
Timing is the number of frames an action takes; spacing is the variation in position between successive frames; rhythm is the overarching cadence governing the pace of cuts and arrivals.