Home›Heatmap›Heatmap Calendar
NEWHeatmap

Heatmap Calendar

GitHub-style contribution heatmap. Shows activity intensity across days and weeks.

Loading chart…
#heatmap#calendar#github#activity#contribution
When to use a Heatmap Calendar

A Heatmap Calendar is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Showing activity patterns over time (e.g. GitHub contribution graph)
  • ✓Visualizing intensity of data across two dimensions
  • ✓Website click maps and user engagement patterns
  • ✓Calendar-based data like booking frequency or sales by day
Tips for Recharts Heatmap Calendar
TIP 1Use 5 intensity levels maximum for clear visual distinction
TIP 2Always add a legend showing what each color level means
TIP 3Tooltip each cell on hover to show the exact value
TIP 4Use green shades for activity data (matches GitHub convention users know)
TIP 5Group by week columns for calendar heatmaps — it matches mental models
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar