Sample CSV
| Date | Commits |
|---|---|
| 2024-01-01 | 8 |
| 2024-01-02 | 6 |
| 2024-01-03 | 9 |
| 2024-01-04 | 6 |
| 2024-01-05 | 12 |
How to Create a Calendar Heatmap
A step by step walkthrough for turning a sheet of dates and daily values into a published calendar heatmap in PlotSet, with one shaded square for every day.
About 6 minutesOne square for each day, laid out in calendar weeks and shaded by how much happened: that is what you will have. Busy weekdays, quiet weekends, seasonal swells and long gaps all show up at a glance.
Expect about six minutes. The template needs just two columns, so most of the time goes on choosing a colour theme and checking the scale.
The data you need
One row per day with two columns: a date, and the number for that day.
Use one row per day. Days you leave out are drawn in the no-data colour.
ISO dates, such as 2024-01-05, are the safest. Anything the platform's date parser accepts will work.
The grid spans every year present in your data, with one band per year.
A day with a value of zero is not the same as a missing day. Keep zeros if they are real readings.
The steps
The exact click path in PlotSet, from a blank template to a finished chart.
- 01
Open the Calendar Heatmap template
From the PlotSet dashboard, start a new project and choose Calendar Heatmap from the Heatmaps category. It loads with two years of sample commits so you can see the layout straight away.
Every guide starts here. Pick the category, then the template: it is the same grid whichever chart type you are after. - 02
Prepare your daily data
Put the date in the first column and the number in the second, one row per day. Remove any blank or text rows from the number column.
- 03
Upload the file, or connect it live
Import a CSV or .xlsx file from the data panel, paste rows from a spreadsheet, or connect a Google Sheet so the chart can follow your updates. The first row is read as the headers.
The data view, shown here on a bar chart project. Upload a CSV, lift the numbers out of an image with Magic Import, or sync a Google Sheet. The panel is identical for every chart type. - 04
Check the column bindings
Confirm that the date column is bound to dates and the other column to values. This is usually right automatically when the headers are clear.
Bindings decide which column becomes the label, which supplies the values and which drives the colour. Auto Binding guesses them from your headers, so check it rather than assume it. - 05
Choose a colour theme
In the Color tab pick a theme for the scale, and set the colour for days with no data. Keep the no-data colour clearly different from the palest shade of the scale.
The Preview tab for a Calendar Heatmap. Every styling control lives in the outlined panel, each on its own tab: appearance, header, footer and the options specific to this chart type. - 06
Tune the cells and labels
In the Cells tab set the square size, corner radius and gap. In the Labels tab show or hide the month, weekday and year labels.
- 07
Set the colour scale
Leave the Scale tab on automatic, or enter a minimum and maximum so a single extreme day does not wash out the rest.
- 08
Add the legend, title and source
Style the legend ramp, then use the Header and Footer tabs for a title, a subtitle and a source line.
- 09
Publish or export
Publish for a live chart and copy the embed code from the Share dialog, or use Export for a PNG or SVG.
Share is how a finished chart becomes a public link and an embed code.
Start from the Calendar Heatmap template with sample data already loaded, then swap in your own.
Open the templatePublish, embed or export it
The last stretch is the same for every chart type: Share turns the chart into a live public link and an embed code, Export writes it out as a static file.
Share: public link and embed code
Activating the embed code and public link publishes the chart. The link is safe to send to anyone, and the embed code drops into any page as an iframe that keeps the hover tooltips and the interactivity. Edit the chart later and hit Recreate to push those changes out to both.
Export: SVG, PNG or JPG
Export writes a static copy at whatever size you need. SVG stays sharp at any scale and can still be edited in a design tool; PNG and JPG are the safe choices for slides and documents. The scale multiplier is what gets you a crisp image on a retina screen.
Styling tips for a Calendar Heatmap
Start with a single year
One year gives the largest squares and the clearest reading of the weekly rhythm.
Cap the scale
If one day dwarfs the rest, set a custom maximum and say so in the footer.
Keep real zeros
A quiet day is a fact. Only leave a day out when you truly have no reading.
Use the tooltip
Hovering a square shows its date and value, so you do not need to print numbers on every cell.
Common mistakes when making a Calendar Heatmap
The grid is empty
Dates probably failed to parse. Use ISO dates and check the date column is bound correctly.
Everything looks the same shade
An outlier is stretching the scale. Set a custom maximum in the Scale tab.
The squares are tiny
Too many years are crowding the grid. Trim the data to the span you need.
Missing days look like low days
Make the no-data colour clearly different from the low end of the scale.
Learn more about the Calendar Heatmap
Not sure the Calendar Heatmap is the right choice? See what it is, when to use it and when not to.
Calendar Heatmap: common questions
A date column and a numeric value column, with one row per day.
Make your Calendar Heatmap now
Free to start with 300+ templates. No credit card required.