Horizontal Bar Chart — HTML CSS JS Ranking Bars

When you're comparing a list of named items — countries, products, referrers, team members — a horizontal bar chart reads far better than a vertical one: the labels sit on a tidy left column where they're easy to read, and the bars extend rightward in a natural ranking. This snippet builds that chart in plain HTML, CSS, and vanilla JavaScript, with animated fills, a sort toggle, and no charting library.

A CSS-grid row, not an SVG

Each row is a three-column CSS grid: a fixed-width label column, a flexible track that holds the bar, and a right-aligned value. Building bars as plain divs with a percentage width (rather than SVG rects) means the bars inherit border-radius, transitions, and gradients for free, wrap responsively, and need zero coordinate math. The track is a light rounded rail; the fill is a coloured bar clipped to it with overflow: hidden, so rounded corners stay crisp at any width.

Scaled to the maximum, animated from zero

Every bar's width is its value as a percentage of the largest value in the dataset, so the longest bar fills the track and the rest are proportional — the standard way to scale a bar chart for visual comparison. The fills start at width: 0 and animate to their target on the next animation frame; deferring the width assignment to requestAnimationFrame is the key trick that lets the CSS transition run, because setting the final width in the same tick the element is created would skip the animation entirely.

A sort toggle that re-ranks

A single button flips the sort between high-to-low and low-to-high, re-rendering the rows in the new order with the fills re-animating. Sorting works on a copy of the data (DATA.slice()) so the original order is preserved, and the max-value scaling stays consistent regardless of sort direction, so a bar represents the same width whether it's at the top or bottom of the list.

Labels that carry context

Each label pairs an emoji flag (or any icon) with the name, and a tabular-figures value sits at the end of the row so the numbers align vertically into a clean column — font-variant-numeric: tabular-nums keeps digits the same width so values don't jitter as they change. This three-part row (icon + name, bar, value) is the canonical "ranking list" layout you see in analytics dashboards everywhere.

Data-driven and drop-in

The whole chart renders from a DATA array of { label, flag, value, color }. Swap in your own ranked figures and the bars, scaling, sort, and values all follow. Because it's pure HTML/CSS/JS with no dependencies, it drops into any dashboard or report, and it's a clear reference for the percentage-of-max scaling and the requestAnimationFrame animation trick that apply to any bar visualisation.