New to Kendo UI for AngularStart a free 30-day trial

Heatmap

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

Basics

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.

The following example demonstrates the Angular Heatmap chart in action.

Change Theme
Theme
Loading ...

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 Angular Heatmap to objects with custom fields.

Change Theme
Theme
Loading ...

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:

Change Theme
Theme
Loading ...

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 Angular 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:

  • value—The point value object with x, y, and value fields.
  • dataItem—The original data item.
  • min—The minimum value for the series.
  • max—The maximum value for the series.
  • series—The 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:

Change Theme
Theme
Loading ...

Marker Shapes

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

  • rect—Rectangular markers.
  • roundedRect—Rounded rectangles with a configurable border radius.
  • circle—Circle markers.
  • triangle—Triangle markers.
Change Theme
Theme
Loading ...

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:

Change Theme
Theme
Loading ...

Pann and Zoom

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

Change Theme
Theme
Loading ...

Tooltips

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

Change Theme
Theme
Loading ...

The following fields are available in the tooltip template:

  • value—The point value object with x, y, and value fields.
  • dataItem—The original data item.
  • series—The series configuration object.

Crosshairs

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

Change Theme
Theme
Loading ...

Support and Learning Resources

Additional Resources