React chart example
Annotated heatmap
Explain the patterns behind a heatmap with notes, arrows and callouts anchored to the data.
Options apply to compatible charts.
Synthetic sample data · Retention for 8 cohorts across 8 weeks.
What is an annotated heatmap?
An annotated heatmap adds explanatory notes to selected cells or patterns in a matrix. Colour shows the data; text, arrows and callouts help readers understand what deserves attention. It is useful when a grid has a specific story that colour alone cannot explain.
When to use it
Use annotations for a notable cohort, an unusual period or an event that provides context for a pattern. Keep the number of notes small enough to preserve the grid. A rule-based highlight is better when the aim is to flag every cell meeting the same condition.
Design tips
Anchor each callout to the relevant observation so its target is unambiguous. Check placement again when the chart narrows or labels wrap.
Write notes that explain significance or context instead of repeating the visible number. Separate an observed change from an explanation that still needs evidence.
Leave enough space around the most important cells and keep the colour scale interpretable. Too many arrows can turn a scan-friendly matrix into a crowded diagram.
Graphy Chart SDK
Add Graphy’s annotated heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.