Charts & data-vis

Line, bar, area, pie, radar, sankey, heatmaps, treemaps. 16 live React parts, each in nine looks.

• Activity heatmap: A calendar of daily counts, one cell per day on a sequential ramp: weeks across, weekdays down, month and weekday labels, a legend scale, hatched days that were never recorded, and a keyboard grid that reads each day's date and value.
• Area chart: Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing values, a legend that toggles series and a table view of every number.
• Bar chart: Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a header readout and a highlighted bar, on one data API; a missing value is a stub in its slot, never a zero bar.
• Composed chart: Different measures on one time axis: bars, lines and areas per series, a left and a right value axis with their own formats, and reference lines.
• Gauge: One value against a known range: a semicircle, a 270° dial or a full ring, filled or with a needle, coloured bands with their names (healthy, busy, saturated), an optional target tick, the value large in the middle, and a meter that assistive technology reads.
• Line chart: Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a range handle; missing values break the line.
• Pie chart: A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering or focusing a row lifts its slice, clicking pins it.
• Radar chart: A few series compared across the same five to eight dimensions as polygons on a polygon or circle grid; hover or arrow keys pick a dimension and read every series' value there.
• Radial chart: Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target and percent.
• Ridgeline: Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row, hover or focus a ridge to bring it forward with its markers, and hatched rows for groups that were not measured.
• Sankey chart: Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and reads its totals in and out.
• Slope chart: Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼) and the signed change as well as colour, and hover or focus to pick one item out.
• Sparkline: A compact trend beside its value: point along it or focus it and use ← → to read each point; nulls are gaps. TrendLine is the bare line.
• Streamgraph: Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a tooltip that follows the pointer or the arrow keys, and hatched periods where a layer was not measured.
• Treemap: Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus highlight, drill in with a click or Enter and out with Escape, Backspace or the breadcrumb, hatched chips for parts that were not measured, and a table of the current level.
• Waffle chart: Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose category was not recorded, the remainder left empty, and a list of categories with counts and shares that highlights its cells on hover or focus.

190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

Other categories: Actions · Form controls · Overlays · Navigation · Layout · Feedback · Content & display · Data & tables · Trading · Dashboard · AI & agents · Voice & audio · Motion & effects · Blocks