Status
The status of the component
Documentation in progress
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
-
Best Practices
- Use heat maps when complex data needs to be visualised at a glance.
- Do not use a heat map if small differences are to be shown.
- Categorical heat maps should have three categories.
Usage Guidelines
Hover
On hover of a tile, a tooltip appears and all other tiles reduce in opacity.
On hover of an axis label, all other tiles not in the row (horizontal) or column (vertical) reduce in opacity.
Drilldown
If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.
Focus
On focus of a tile, a focus ring encompasses said tile with a corresponding tooltip.
On focus of an axis label, a focus ring encompasses said label, a tooltip appears with Min, Max and Avg information of that row or column and all other tiles not in the row or column reduce in opacity.
Legend
A gradient-legend positioned below the chart should be included.
Labels
Tile labels can be included if required. By default, labels are not included.
Responsiveness
Tiles should resize proportionally as the chart grows or shrinks.
Categorical Heat Map
A heat map can also be used to display categorical data. Categorical heat maps should have three categories (eg. Good-Okay-Bad, Yes-Maybe-No) only.
