Turn daily counts into the familiar calendar heatmap made of small squares. Paste dates and values or use sample data, pick a colour scale and copy a static HTML and CSS component.
Leave the box empty to use random sample data. Repeated dates are added together.
Runs entirely in your browser. Nothing is uploaded to any server.
Static HTML and CSS that loads instantly and never breaks.
Paste dated counts from a spreadsheet or app export.
Commits, workouts, words written or pages read.
The grid uses CSS Grid with seven rows and grid-auto-flow: column, so each week fills one column from top to bottom, exactly like GitHub's contribution graph. Days after your last day are kept as invisible cells so the last column lines up.
Each day gets one of five levels. Level 0 means no activity, and levels 1 to 4 split the range between 1 and your highest daily value into quarters. Custom colours are blended from the empty colour to your chosen colour so the scale always looks even.
Every square has a title showing the date and the count.
The grid has role="img" with a label that gives the total.
Wide graphs scroll sideways instead of overflowing the page.
One line per day with an ISO date and a number, such as 2026-03-14, 4. Commas, semicolons, tabs or spaces can separate them.
Zero is the empty colour. Other values are split into four equal steps between 1 and your highest value in the shown range.
No. The heatmap is plain HTML and CSS, so it works in emails that support CSS grid, static sites and documentation.
Yes. Set weeks to a smaller number such as 13 for about three months.
Labels are placed at the week where a month starts and skipped when they would overlap the previous label, just like GitHub.
More free tools from My Panda Toolbox.