React chart example
Highlighted heatmap
Direct attention to selected cells or thresholds while keeping the surrounding matrix visible for context.
Quarterly sales by region
Emphasise cells that meet a sales threshold.
What is a highlighted heatmap?
A highlighted heatmap keeps a full matrix visible while directing attention to selected cells. The selection can follow a rule, such as meeting a threshold. It adds emphasis to the existing encoding without requiring the reader to search every value manually.
When to use it
Use it for exception monitoring, target attainment or a focused comparison within a larger grid. A rule is especially useful when it should continue to work as data changes. Keep the surrounding cells available so readers can understand how the highlighted values compare with the rest.
Design tips
State the rule clearly and include its unit. A highlight labelled “high performance” should have a defensible definition.
Retain enough contrast in the unselected cells to preserve context. Emphasis should not make the rest of the chart unreadable.
Recheck the rule when the metric or population changes. An absolute threshold can be appropriate for a target but unfair for comparing groups of very different sizes.
Build this chart in React
Compare with
Use when every cell should carry equal visual weight.
Use when emphasis needs an explanatory note, arrow or callout.
Graphy Chart SDK
Add Graphy’s highlighted heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.