Horizon Chart — Free HTML CSS JS Snippet

A horizon chart is a space-efficient technique for displaying many dense time series at once by "folding" each series' value range into a small number of overlapping color bands, instead of giving every series its own full-height area chart. The result looks unusual at first — thin colored stripes rather than familiar peaks and valleys — but it lets six, twelve, or dozens of series stack in the vertical space that a handful of ordinary Area Charts would need, which is exactly why monitoring dashboards (server metrics, sensor arrays, financial time series) use the technique when screen space is scarce and dozens of series must be compared at a glance.

The folding technique, concretely

For a row with BANDS = 4 color bands and a value range of 0-100, the value range is divided into four equal slices (0-25, 25-50, 50-75, 75-100). Rather than compressing the whole 0-100 range into the row's height (which would make small values invisible), each band redraws the *entire* series as its own area, but shifted so that band's floor value sits at the row's bottom — shifted = Math.max(0, v - bandFloor). A value of 60 therefore appears as "full height" in band 0 (0-25, clipped since it exceeds the band), still substantial in band 1 (25-50, also clipped), and correctly partial in band 2 (50-75) — every band below the value's actual band renders as a full, clipped block of its own color, and the topmost relevant band shows the "remainder." Layering these clipped bands with decreasing opacity per band is what produces the characteristic banded-color read: deeper/more saturated color visible through more layers signals a higher value.

Why SVG clip-paths do the heavy lifting

Each band is drawn as a full-height area path that would otherwise overflow the row (since a shifted value can go far above the row's actual pixel height), then constrained with clip-path: url(#clipId) referencing a <clipPath> containing a simple rect matching the row's exact bounds. This is what turns an oversized, overflowing shape into a correctly-cropped band — without the clip-path, higher bands would draw far outside the intended row and overlap neighboring rows.

Reading a horizon chart

Once the eye adjusts, the technique reads quickly: a row that stays a light, single color the whole width was consistently low; a row that frequently shows the darkest red band was frequently near its maximum; a sudden burst of dark color in an otherwise light row is a spike. The legend strip beneath the chart shows the same color ramp used per band, from the coolest (lowest) to the hottest (highest) fold.

Synthesizing realistic per-host CPU data

genSeries(seed) is not pure random noise — it layers a slow random-walk "level," a daily sinusoidal cycle (higher during work hours, matching real server load patterns), and occasional random spikes, clamped to a 0-100 range, so each of the six simulated hosts in the demo produces a visually distinct but plausible week of hourly CPU-load data.