Bars, sparklines, gauges and heat grids without a chart library.
A chart library is the right call for anything with axes, tooltips and a legend. For a sparkline in a table cell or a bar in a stat tile it is 40KB to draw six rectangles, and these are the alternative: gradients, grids and custom properties that take the numbers directly. They stop where interactivity starts, which is the honest boundary.
Six-column blue bar chart; heights come from a --h custom property and grow in sequence.
Two-segment ocean donut drawn with one conic-gradient — no SVG, no chart library.
Compact ocean area sparkline shaped entirely by a clip-path polygon.
KPI tile with label, value, and a blue delta chip that lifts on hover.
Contribution-graph style grid where ocean cells shimmer at different intensities.
Half-dial score gauge in ocean, drawn from one conic gradient and cut to an arc with a radial mask.
Two-series comparison chart in ocean; bar heights are a --h custom property, so the markup carries the data.
Top-pages analytics list where each row's blue bar is the value — the density every dashboard sidebar needs.
Metric tile with a clip-path area sparkline fading from ocean into the card.
Three-column grid so labels, bars and values line up on their own axes, with widths as inline styles because the lengths are data.
Two series cut from gradients with `clip-path` over repeating gridlines, so the plot needs no SVG path and still has real axis labels.
Stage bars narrowing by percentage width with the count inside each, so the drop-off is legible without reading a single number.
OHLC bars where each candle's wick and body come from custom properties on the element, so the data lives in the markup and the CSS stays one rule.
Three small multiples sharing one scale, so utilisation across resources is comparable at a glance rather than three separate readings.
Six-axis spider plot where the web is one repeating-radial and one conic gradient, and the series is a single clip-path polygon that scales up from the centre as it plots.
Bridge from one period total to the next, each floating bar offset by the running balance beneath it and connected by dashed leader lines so the arithmetic is visible.
Stephen Few's replacement for the gauge — a measure bar over banded qualitative ranges with a target tick, carrying in one row what a dial needs a whole tile for.
Share-of-total as nested area rather than length, sized with fractional grid tracks so the proportions are declared once and the tiles re-solve at any width.
A staircase step chart drawn as a clip-path polygon over a gridded plot area, with a sky-blue area fill and day labels.
Three nested progress rings built from conic gradients and radial masks, with a colour-keyed legend showing each percentage.
A violet histogram of nine bell-shaped bins over a baseline with a dashed mean marker and axis ticks.
Ranked lollipop chart with orange stems ending in a dot marker, category labels on the left and values on the right.
Dumbbell range chart: each row joins a grey start dot to an emerald end dot with a gradient bar, showing year-over-year change.
A single stacked 100% bar split into indigo-tinted segments with a header total and a colour-keyed legend of percentages.
Showing 24 of 36. Search the rest →
Number rows, KPI tiles, trend deltas and counters.
Stat rows, chart cards, activity feeds and admin shells.
Sticky headers, zebra rows, density variants and responsive stacks.
Vertical histories, horizontal steps and progress trails.
Scroll-snap tracks, marquees and logo tickers.
Floating labels, filled and outlined fields, focus rings.