CSS Charts & Data Effects

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.

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.

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.

Dumbbell range chart: each row joins a grey start dot to an emerald end dot with a gradient bar, showing year-over-year change.

Two source bands feeding three destinations through tapered gradient ribbons, the others dimming as one flow is hovered.

Age bands stacked around a centred label column, with one bar growing left and one growing right so the two populations can be compared band by band.

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.

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.

A staircase step chart drawn as a clip-path polygon over a gridded plot area, with a sky-blue area fill and day labels.

Two-by-two scatter plot with crosshair axes and a tinted winning quadrant, points swelling under the cursor.

Causes ranked as descending bars with a cumulative percentage line running across them and a dashed eighty percent rule marking where the vital few end.

Three nested progress rings built from conic gradients and radial masks, with a colour-keyed legend showing each percentage.

Scatter of translucent bubbles sized by a third measure, screen-blended over a faint plot grid so overlaps read as brighter.

Mosaic of stacked columns where each column is as wide as the share of the market it represents, so both the split inside a region and the size of the region read from one block.

A violet histogram of nine bell-shaped bins over a baseline with a dashed mean marker and axis ticks.

Horizontal box-and-whisker rows showing the interquartile box against its full range, one row per percentile band.

Eight equal-angle petals drawn from the centre, each reaching a different radius over faint guide rings so the values read as a rose rather than a row of bars.

Ranked lollipop chart with orange stems ending in a dot marker, category labels on the left and values on the right.

Before-and-after slope lines with a dot at each end, showing which series rose and which fell between two periods.

Fifty squares in a ten-wide grid with thirty-four of them filled, so the proportion can be counted square by square instead of read off an axis.

A single stacked 100% bar split into indigo-tinted segments with a header total and a colour-keyed legend of percentages.

Retention cohort table where each signup month is a row and colour intensity falls off week by week across it.

Three translucent discs blended together so every intersection lightens, with the audience count printed in each exclusive region and in the shared centre.