React Data Storytelling Components
Count-up numbers, progress rings, sparklines, comparison sliders and metric cards. For presenting data as a story told in order, rather than dropping a chart on the page.
26 components, 18 of them free to install without an account.
A grid of KPI tiles; clicking a tile expands a full-width detail panel below its row while the remaining tiles move down to make room, and clicking again collapses it.
A hero layout built around one giant number filling the first screen, with SVG leader lines drawn one by one as you scroll, connecting parts of the number to surrounding annotation cards that surface in sequence.
A wall of KPI tiles whose sizes are computed automatically from the weight of each value, revealed largest-first in a cascade, expanding a detail layer on hover.
- Year Pulse GridFree
A GitHub-style wall of day cells for a whole year — a wave sweeps across on load lighting cells up by intensity, hovering a day floats an event card, and clicking a cell selects it and filters the linked sidebar list to that day's events.
A data-driven rank shuffle leaderboard — rows swap positions with a FLIP animation when scores update, arrows flash for rank gains and losses, and the top three carry gold, silver, and bronze podium vocabulary.
An "X in every Y" isotype proportion grid — hundreds of small icons light up in a color wave as you scroll, stepping through different proportion statements one at a time.
- Guess Gap RevealFree
Guess-the-gap reveal — drag a slider or draw a trend line to guess the answer first, then let go and watch the real data animate in, with a color block marking the gap between "your guess" and the truth alongside the distribution of other readers' guesses.
Multi-axis radar chart: a drawing animation on reveal, values on vertex hover, and two series overlaid for comparison.
Multi-period rank line chart: curve stroke-drawing animation, with hover highlighting a single entry's path.
- Gauge MeterFree
Needle gauge: a spring-swinging needle, banded color arcs, and a rolling value.
- Word CloudFree
Weighted word cloud: font size mapped to weight, spiral layout, and words lifting on hover to show their value.
- Orbit TimelineFree
Events arranged around concentric orbits, expanding a detail card when one is selected.
- Funnel ChartFree
An SVG conversion funnel React component: trapezoid stages grow in one after another, stage-to-stage conversion labels sit between layers, hovering highlights a stage with a tooltip, in vertical and horizontal modes with a screen reader data table.
Sankey diagram: automatic column layout, link widths proportional to value, animated gradient flows, and hover that traces a full path while dimming the rest — self-contained layout, no d3
A navigation-style route card — a grid basemap with deterministic streets, a route drawn segment by segment, a marker travelling along it, street labels fading in on arrival and a live ETA readout.
A duration comparison React component: two to five durations grow on one shared scale at one shared speed — say 30 minutes versus six weeks. Units convert automatically, readouts count up with the bar width, a ratio badge pops in when they finish, and a broken axis keeps the shortest bar visible when the gap is extreme.
Eleven data-driven SVG diagrams — hub routing, sequence lanes, cycle, timeline, radial branches, funnel, tier pyramid, anchored callouts, branch reveal, quadrant and Venn — each drawn in with stroke tracing and staggered nodes.
- Balance ChartFree
A diverging bar chart React component centred on a zero axis: income grows up and expenses grow down, a net line draws in once the bars land, and hover or keyboard focus shows the period's income, expenses and net.
- Event Bar ChartFree
A Gantt-like event bar chart React component with timed segments on swimlanes, panned by drag or arrow keys, an event card that expands on hover or focus, a self-contained SVG time axis and a screen reader data table.
A stacked column chart React component. Clicking a legend item collapses that layer while the remaining layers sink into place on a spring and the Y axis rescales with tweened ticks; hover or use the arrow keys for a per-column breakdown.
A React multi-line chart with a live summary column: lines draw in with a stroke animation, and as the pointer moves the summary's values and change rates roll digit by digit to that point in time. Click a summary row to hide a line and the Y axis re-tweens.
A paired column chart comparing two series side by side: switching periods reorders and resizes the bars with a layout animation, and hovering shows the gap between the pair.
A live scrolling spectrum and heat band: a canvas waterfall of band intensities drawn frame by frame, with pause, hover readouts and automatic pausing when off screen.
An editable spreadsheet grid: arrow-key selection, double-click or Enter to edit, a formula bar showing raw input, simple formulas, and a frozen header row and column.
A pannable, zoomable system map: nodes and edges are generated from data, groups expand and collapse, and selecting a node highlights its connected paths and opens its details.
A force-directed knowledge graph built from Markdown or structured records: a constellation-style dark canvas you can drag, zoom and search, with each node's source citations in a side panel.