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.
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 binding | Data type | Required | Description |
|---|---|---|---|
field | `number | undefined` | Yes |
xField | `string | number` | Yes |
yField | `string | number` | 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.
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:
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 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)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base