Streak heatmap

A year laid out as a wall of squares, five shades from nothing to a lot. The wall appears column by column, a missed day is ticked underneath so the break is visible without counting, and clicking any square pops that day's detail out beside it.

What it is

A year laid out as a wall of squares, five shades from nothing to a lot. The wall appears column by column, a missed day is ticked underneath so the break is visible without counting, and clicking any square pops that day's detail out beside it. The GitHub-contributions pattern, adapted for habit trackers, fitness logs, learning apps and any product that wants consistency to be visible at a glance.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 6 集「10 个图表交互控件」· 02 打卡热力格 · 0:09