Radial Bar Chart — Circular Bar Chart HTML CSS JS

A radial bar chart (or circular bar chart / progress rings) wraps each category into a concentric ring, with the arc length around the ring encoding its value — the look popularised by fitness trackers and dashboard progress widgets. This snippet builds it in plain HTML, CSS, SVG, and vanilla JavaScript, with animated arcs and a legend — no charting library.

Each category is a ring

Categories are drawn as concentric circles at decreasing radii (outer ring first), each a fixed thickness with a small gap between them. For every ring there is a faint full-circle track and a coloured value arc on top. Laying categories out as nested rings (rather than wedges like a pie or polar chart) is what defines a radial bar chart, and it reads naturally as a set of progress dials stacked into one compact graphic.

Arc length via stroke-dashoffset

The value arc is a stroked circle whose stroke-dasharray equals its full circumference (2πr), so the whole stroke is one dash exactly as long as the ring. Setting stroke-dashoffset to circumference × (1 − value/100) reveals just the fraction of the ring corresponding to the value — 86% fills 86% of the circle. This dash-offset technique is the standard, dependency-free way to draw any circular progress arc, applied here per ring with each ring's own circumference (since radius, and therefore circumference, differs per ring).

Starting at the top, with round caps

Each ring is rotated −90° around the centre so its arc begins at twelve o'clock, the orientation people expect for progress. Round line caps give the arcs the soft, pill-ended look of fitness rings. Because each arc is its own SVG circle, rings animate and can be styled independently.

Animated fill

The arcs start empty (offset at full circumference) and animate to their values on the next animation frame via a CSS transition on stroke-dashoffset — the requestAnimationFrame defer that lets the transition run from the start state. Each ring sweeps to its value, giving the satisfying "rings filling" reveal.

Legend and data-driven

A legend lists each category with its colour and percentage. Everything renders from a DATA array of { name, value, color } (values 0–100), so swapping in your metrics — goal completion, KPI attainment, capacity used — updates the rings and legend together. It is a clear reference for concentric ring layout and per-ring dash-offset arcs that power radial bar and progress-ring charts. Keep in mind that nesting more than four or five rings starts to hurt readability: each successive ring is both thinner in absolute terms relative to its smaller circumference and physically harder to compare to the others at a glance, so beyond that count a small multiples layout of separate single-ring gauges usually communicates the same data more clearly than one crowded radial stack.