Heatmap
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.
Binding to Data
You can bind the Heatmap series to an array through the data property in two formats:
-
Binding to arrays—Use arrays of
[X category, Y category, value].tspublic data: [string, string, number][] = [ ['Mon', 'Morning', 10], ['Mon', 'Afternoon', 15], ['Tue', 'Morning', 8] ]; -
Binding to objects—Use an array of objects with custom properties.
tspublic data: Array<{ x: string; y: string; value: number }> = [ { x: 'Mon', y: 'Morning', value: 10 }, { x: 'Mon', y: 'Afternoon', value: 15 }, { x: 'Tue', y: 'Morning', value: 8 } ];When binding to objects, specify which properties contain the data through the following field mappings:
Property Data type Required Description fieldstringYes* The property name that contains the numeric value (*required when binding to objects). xFieldstringYes* The property name that contains the X category with stringornumbervalues (*required when binding to objects).yFieldstringYes* The property name that contains the Y category with stringornumbervalues (*required when binding to objects).
The following example demonstrates how to bind the Heatmap series to data using object models.
Binding to Objects with Custom Fields
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.
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:
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 withx,y, andvaluefields.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:
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.
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:
Pann and Zoom
The following example demonstrates how to configure the Panning and Zooming features for the Heatmap chart:
Tooltips
The following example demonstrates how to configure series tooltips for the Heatmap chart:
The following fields are available in the tooltip template:
value—The point value object withx,y, andvaluefields.dataItem—The original data item.series—The series configuration object.
Crosshairs
The following example demonstrates how to configure axis crosshairs for the Heatmap chart:
Support and Learning Resources
- Heatmap Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base