Home›Heatmap›Cohort Retention Heatmap Chart
NEWPOPULARHeatmap

Cohort Retention Heatmap Chart

B2B SaaS monthly user retention matrix featuring color-gradient heat decay cells and interactive retention decay curves.

Loading chart…
#cohort#retention#heatmap#saas#matrix#decay
Customization Guides & Code Snippets

◆Dynamic Heatmap Cell Color Intensity

Map retention percentages into graduated opacity levels to provide instantaneous visual recognition of retention drop-off points.

const getHeatmapColor = (rate: number) => {
  if (rate >= 90) return 'rgba(0, 229, 160, 0.55)';
  if (rate >= 75) return 'rgba(0, 229, 160, 0.40)';
  if (rate >= 65) return 'rgba(0, 229, 160, 0.28)';
  return 'rgba(74, 158, 255, 0.20)';
};
When to use a Cohort Retention Heatmap Chart

A Cohort Retention Heatmap Chart 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 Cohort Retention Heatmap Chart
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
Frequently Asked Questions

What is a cohort retention chart (saas cohort analysis chart)?

A cohort retention chart tracks groups of users who signed up during the same calendar month across subsequent months (Month 0 to Month 6+). It measures customer stickiness, product-market fit, and user retention decay over time.

How do you build a cohort retention heatmap in React (cohort chart react)?

Render an interactive matrix table where cells are color-coded based on retention percentages (e.g. green for >75% retention, blue for 50–74%, slate for <50%). Pair the grid with an interactive line chart showing retention decay curves per cohort.

Why is cohort analysis critical for SaaS businesses?

Cohort analysis separates retention trends from top-line growth. It reveals whether newer product releases and onboarding improvements are actually retaining customers longer than earlier product iterations.

Related Charts