React chart example
Cohort heatmap
Compare groups at the same stage after a shared starting event, with colour revealing patterns over elapsed time.
Weekly cohort retention
Read retention across cohorts and elapsed weeks.
What is a cohort heatmap?
A cohort heatmap compares groups that share a starting event, such as signup, across the time elapsed since that event. Each cell represents a group at a particular age. Colour encodes a measure such as retention, making repeated patterns and differences between cohorts easier to scan.
When to use it
Use it to compare retention, repeat purchasing or continued product use across signup groups. Elapsed time is the key: compare groups at the same age, not simply on the same calendar date. A regular time-series chart is better when the question concerns overall activity on a specific day.
Design tips
Define the cohort rule, retained event and denominator. “Week 4 retention” is ambiguous unless readers know what counts as retained and which starting population is used.
Use the same colour scale for comparisons. Automatic rescaling between views can make equally retained groups look different.
Keep not-yet-observed periods distinct from zero retention. Recent cohorts may simply not have reached later weeks. Include cohort sizes when interpreting real results.
Build this chart in React
Compare with
Use when specific cells need explanatory notes or callouts.
Use for two general categorical dimensions without cohort timing.
Graphy Chart SDK
Add Graphy’s cohort heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.