Sleep Cycle Chart — Free HTML CSS JS Snippet

Sleep-tracking apps summarize a night in one recognizable shape: a horizontal bar segmented by stage — awake, REM, light, deep — that lets you see the night's rhythm at a glance without reading a single number. This snippet rebuilds that chart with plain SVG rectangles and CSS, no charting library, alongside a color legend and per-stage duration stats. It pairs well with a water intake tracker or workout interval timer in a broader health dashboard.

Segments, not a data series

Sleep data here is a chronological array of { stage, minutes } segments rather than one value per hour — because real sleep cycles don't move in neat hourly buckets, they shift between stages every 10-50 minutes throughout the night. Modeling it as ordered segments captures that texture accurately: cycling from light to deep to REM and back, with occasional brief awakenings, several times per night.

One SVG, proportional rectangles

render() walks the segment array once, computing each rectangle's width as its share of the total sleep-tracking duration scaled to the SVG's viewBox width, and advancing an x cursor as it goes. Because preserveAspectRatio="none" is set on the <svg>, the chart stretches to fill any container width while each segment's *relative* width — and therefore the story it tells about the night — stays exactly proportional.

Color coding that matches sleep-tracker conventions

Awake is red (a state to minimize), deep sleep is green (the most restorative stage), REM is purple, and light sleep is blue — following the color language used by Apple Health, Fitbit, and Oura, so the chart reads instantly to anyone who has seen a sleep-tracking app before. The legend and the per-stage summary stats reuse the exact same color-per-stage object as the chart bars, so there's a single place to change a stage's color.

Totals computed from the same segments

The header's "time asleep" figure and the four per-stage summary cards at the bottom are both derived by summing the same SEGMENTS array the chart bars are drawn from — awake minutes are subtracted from the total for "time asleep," and each stage's minutes are summed independently for its stat card. Nothing is hand-entered separately, so the chart and the numbers beneath it can never disagree.

Feeding it real tracker data

Replace SEGMENTS with the stage-change events exported by a wearable's API or health-data export (Apple HealthKit, Fitbit, Oura, Google Fit typically expose exactly this shape: a stage label plus a start/end or duration) and call render() once on load. The axis labels under the chart should also be computed from the actual sleep start/end time rather than hard-coded, if you're wiring in live data.