Heatmap Chart


A heat map displays quantitative values for two or more sets of categories. It is commonly used to visualize hot spots within data sets. It helps to discover patterns and correlations. Due to its compact nature, it is often used with large sets of data. Heat maps are used to present the order of magnitude.


  • Comparison
  • Correlation patterns
  • Distribution


The plot is a part of keen.io/charts package and can be used in React environment as standalone component.


Property Description Type Default
data Chart data Record<string, any> -
labelSelector Name of data object property used to create labels on axis string -
minValue Minimum value for axis number or “auto” “auto”
maxValue Maximum value for axis number or “auto” “auto”
keys Keys picked from data object used to generate blocks string[] [“value”]
layout Layout applied on chart bars enum[vertical, horizontal] “vertical”
colorMode Color mode enum[continuous, discrete] “continuous”
padding Block padding number 2
steps Amount of step for color calculation number 2
range Range used for filtering values RangeType { min?: null, max?: null }
xScaleSettings X Scale settings ScaleSettings { type: ‘band’ }
yScaleSettings Y Scale settings ScaleSettings { type: ‘band’ }
xAxisTitle Title for X Axis string -
yAxisTitle Title for Y Axis string -
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 50, right: 20, bottom: 50, left: 40 }


List of theme properties supported by Heatmap widget.

Property Description Type
colors Colors applied on blocks string[]
axisX Axis X theme settings Axis
axisY Axis Y theme settings Axis
tooltip Tooltip settings Tooltip


Categories can be mapped onto the x and y axes and amount can be shown by color. Both axes present discrete scales. Logical sorting and/or event grouping of the categorical values along each axis will aid readability and may help to surface key relationships.


Decisions need to be made about whether to use continuous gradient color range or employ discrete classifications for different value intervals. Color lightness attribute is most often used to represent data on heat map charts. There can be just one Color used to create a monochromatic scale or multiple Colors that will create the gradient effect.


  • Direct value labeling is possible. However, a clear legend to indicate Color association should be just enough to estimate the values and understand the data. Color slider allows limiting results to the range that might be exceptionally interesting.

  • Adding value labels directly on the heat map with multiple categories may create redundant visual noise.