NEWHeatmap
2D Matrix Heatmap
Interactive 2D matrix heatmap showing request volume across days of the week and hours of the day.
Loading chart…
#heatmap#matrix#activity#hourly#grid#intensity
Customization Guides & Code Snippets
◆Calculating Heatmap Color Steps
Divide values into 4-5 quintile buckets to apply progressive opacity scales for clear visual contrast.
function getColor(val: number) {
if (val === 0) return '#161b22';
if (val < 25) return 'rgba(0, 229, 160, 0.15)';
if (val < 60) return 'rgba(0, 229, 160, 0.35)';
if (val < 95) return 'rgba(0, 229, 160, 0.65)';
return '#00e5a0';
}When to use a 2D Matrix Heatmap
A 2D Matrix Heatmap 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 2D Matrix Heatmap
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