Charts & metrics

Animated charts and metric components

Bar chart races, count-ups, line charts, progress arcs, ratings, gauges, and metric cards driven by real values.

Data stories fail when the chart appears all at once and the viewer has to catch up. These components animate the construction — bars growing, lines drawing, numbers counting — so the eye follows the argument in the order you intend.

14 verified components. Browse every category.

component

Animated Bar Chart

hf

A compact data card with deterministic bar growth and value callouts.

block

Bar Chart Race

hf

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

component

Chart Story

hf

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.

component

Conic Progress Ring

hf

A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.

component

Count Up

hf

A token-native stat counter that eases between values and lands with a restrained scale pulse.

block

Count-Up Stat Card

hf

Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes

block

Data Chart

hf

Animated bar + line chart with staggered reveal, NYT-style typography, and value labels

component

Decline Chart

hf

A metric line draws downward as its value counts down and the ambient background darkens in lockstep.

component

Hairline Arc Gauge

hf

Thin circular gauge that draws on while its percentage counts up; one helper call drives both

block

Minimal Line Graph

hf

One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend

component

NYT Graph

hf

Animated data chart in print editorial style

block

Oscilloscope Trace

hf

CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows

block

Specs Checklist

hf

Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes

component

Star Rating Fill

hf

A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.