New to Kendo UI for Angular? Start a free 30-day trial

Heatmap

Heatmap charts use colors to indicate the relative value of data points in two dimensions.

Heatmap charts, also known as "cluster heat map", are suitable for visualizing the magnitude of a value over two dimensions. The X and Y values are discrete and can be set in any order.

Basic Usage

The following example demonstrates the Heatmap chart in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Data Binding

You can bind the Heatmap series to an array that contains:

  • Arrays which represent [X category, Y category, value] tuples.
  • Objects which are also referred to as models.

To bind the Heatmap to objects, specify the field names for each dimension.

Model bindingData typeRequiredDescription
field`numberundefined`Yes
xField`stringnumber`Yes
yField`stringnumber`Yes

The source objects are available as dataItem in templates and callback functions, for example in the tooltip template.

The following example demonstrates how to bind the Heatmap to objects with custom fields.

Example
View Source
Edit In Stackblitz  
Change Theme:

Category Binding

The Heatmap binds the X and Y categories in the order they appear in the source data. To use a different order or bind categories before the data is available, set the categories array of each axis:

Example
View Source
Edit In Stackblitz  
Change Theme:

For more information on how to configure the data-binding mode, refer to the article on binding the Kendo UI Chart to data.

Color Scales

The built-in color scale of the Heatmap changes the lightness of the series depending on the point value. The point with the greatest value is shown in the main series color while lighter shades indicate lower values. The point with the minimal value is set to 5% lightness of the main series color.

To define a custom color scheme, pass a callback function as the series color. The function receives a single argument with the following fields:

  • valueThe point value object with x, y, and value fields.
  • dataItemThe original data item.
  • minThe minimum value for the series.
  • maxThe maximum value for the series.
  • seriesThe series configuration object.

The function returns a color value as a string—either #rrggbb, rgb(r, g, b, a) or a CSS color name.

The following example demonstrates how to use a color scheme from d3-scale-chromatic to color the Heatmap:

Example
View Source
Edit In Stackblitz  
Change Theme:

Marker Shapes

The Heatmap supports the following shapes for each point (marker):

  • rectRectangular markers.
  • roundedRectRounded rectangles with a configurable border radius.
  • circleCircle markers.
  • triangleTriangle markers.
Example
View Source
Edit In Stackblitz  
Change Theme:

Normally, the distance between the markers is fixed and the size of each marker is determined by the available space. To use a fixed marker size and variable distance instead, set the marker size to a value in pixels:

Example
View Source
Edit In Stackblitz  
Change Theme:

Panning and Zooming.

The following example demonstrates how to configure the Panning and Zooming features for the Heatmap chart:

Example
View Source
Edit In Stackblitz  
Change Theme:

Tooltips

The following example demonstrates how to configure series tooltips for the Heatmap chart:

Example
View Source
Edit In Stackblitz  
Change Theme:

The following fields are available in the tooltip template:

  • valueThe point value object with x, y, and value fields.
  • dataItemThe original data item.
  • seriesThe series configuration object.

Crosshairs

The following example demonstrates how to configure axis crosshairs for the Heatmap chart:

Example
View Source
Edit In Stackblitz  
Change Theme: