Charts.css

Charts rendered purely with CSS via the Charts.css framework (MIT). A semantic <table> of normalized values becomes a chart through @property, aspect-ratio, clip-path, conic-gradient, logical properties, and flexbox — no script, no canvas, no images.

Column

Vertical bars: each td is height: calc(100% * var(--size)) of a tbody whose height comes from aspect-ratio: 21/9.

Bar

Horizontal bars: td is width: calc(100% * var(--size)).

Area

A filled quad per point, drawn by a td::before with clip-path: polygon(...) whose vertices are calc() of the data values.

Line

The same clip-path: polygon() technique, clipped to a thin band (--line-size) so only the connecting line shows.

Pie

Each slice is a conic-gradient from var(--start)turn to var(--end)turn, stacked in a square (aspect-ratio: 1) rounded container.

Multiple series

Two datasets per row (.multiple): each td is coloured from the --color-1..10 palette by :nth-of-type.

3D effects

Charts.css documents 3D looks as CSS customizations layered on a plain column chart — no special classes (see chartscss.org).

3D Bars — a stack of offset box-shadows

Ten box-shadow layers, each offset one more pixel up-and-right, build the extruded top-right face of every bar.

3D Tilt — a single transform: skewY()

One skew on the whole chart shears every bar in concert.

Charts with Shadows — inset + outset box-shadow

The chart area and each bar get a rounded box-shadow combining an inset (inner top-left) and an outset (bottom-right) layer, for a raised, tactile look.