OneTaskBy Tim King · Updated
Calendar Heatmap Generator
GitHub-Style Contribution Graph from Dates, Download SVG or PNG Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Calendar Heatmap Generator works
This calendar heatmap generator shades a year of daily values. A calendar heatmap shows a whole year at a glance: one small square per day, laid out in columns of weeks with weekdays running down the side, shaded darker the bigger the day's number. It is the chart GitHub uses for contributions, and it works just as well for workouts, sales, page views, hours logged, or any habit you track daily. Paste rows of date and value, choose a colour, and download the result as SVG or PNG. Nothing is uploaded.
Calendar heatmap generator: what to paste
One row per day with the date first and the value second, separated by a comma, tab or semicolon. Dates must be in ISO order, year-month-day, such as 2025-03-14; a time after the date is ignored, so a timestamp export works too. A header row is skipped automatically. If the same date appears more than once the values are added together, which means an export with one row per event, each with a value of 1, becomes a count per day without any preparation. Days that never appear are drawn in light grey.
Layout and years
Each year is drawn as its own grid of 53 week columns and 7 rows, with the month names across the top and the week starting on Sunday, as GitHub does, or on Monday, as most European calendars do. With no year specified the latest three years present in the data are stacked one above the other, so a two-year habit log shows both years and a single-year export shows one. Type a year to show that year alone. Hover a square for the date and value.
Colour and shading
The colour scale runs from a pale tint for the smallest value to the full colour for the largest. 5 steps divides that range into five equal bands, which is how contribution graphs look and makes it easy to say "a dark day is roughly this many". Continuous shades each day on an unbroken gradient, better when the values vary widely and you want the extremes to stand out. Green is the familiar look; Blue, Purple, Orange and Red suit different brands, and Viridis is the choice when the chart must stay readable in greyscale or for colour-blind readers. The legend under each year shows the five tones from Less to More.
Stats
Below the chart the page counts the days that have data, sums all values, names the busiest day and finds the longest streak of consecutive days with any entry, the number habit apps make a fuss about.
Exporting
Download SVG gives a vector file with one rectangle per day and editable text. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard.
FAQ
My dates are in day/month/year format
Convert them first; the parser only accepts year-month-day so that 03/04 is never ambiguous. In a spreadsheet, format the date column as yyyy-mm-dd before copying, or use the date format converter on this site.
Can I show only part of a year?
The grid always spans a full calendar year so that the week columns line up with the month labels; days outside your data simply stay grey. Type the year to show one year on its own.
Why does the first column look short?
The year rarely begins on the first day of the week, so the first column starts partway down, exactly as a paper calendar does. The last column is short for the same reason.
Does it handle negative values?
Yes; the scale runs from the smallest value to the largest, so the most negative day is the palest. If you have gains and losses it is usually clearer to plot only one of them, or their absolute size.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Heatmap Maker
Paste a labelled table, get a colour-coded heatmap grid; download SVG or PNG.
Timeline Maker
Paste date and event rows, download a timeline as SVG or PNG.
Gantt Chart Maker
Paste task, start and end rows; download a Gantt chart as SVG or PNG.
Line Chart Maker
Paste CSV, get a multi-series line graph; download SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.