React chart example
Highlighted heatmap
Direct attention to selected cells or thresholds while keeping the surrounding matrix visible for context.
Options apply to compatible charts.
Synthetic sample data · Sales for 2 regions across 4 quarters, above and below the 2,400 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.
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.