Heatmap
The Heatmap chart visualizes the magnitude of values across two dimensions using color intensity. Use Heatmap charts to identify patterns, correlations, and outliers in large datasets where both X and Y axes represent discrete categories that can be arranged 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
When binding to objects, you must specify which properties contain your data using the xField, yField, and field properties. For example, if your data uses properties named columnName, rowName, and temperature, configure the series with xField="columnName", yField="rowName", and field="temperature".
The original data objects remain accessible as dataItem in templates and callback functions, allowing you to display additional properties in tooltips or use them in custom logic.
The following example demonstrates how to bind the Heatmap to objects with custom property names (a, b, value).
Category Binding
By default, the Heatmap displays X and Y categories in the order they appear in the source data. To control the category order or define categories before data loads, set the categories array on each axis. This approach is useful for:
- Maintaining consistent axis order across multiple charts
- Displaying categories in a specific sequence (chronological, alphabetical, or custom)
- Showing empty cells for missing data points
The following example demonstrates how to define custom category order for both axes.
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(default)—Rectangular markers provide maximum coverage and work well for dense datasets.roundedRect—Rounded rectangles with a configurable border radius offer a softer, modern appearance.circle—Circle markers create visual separation between data points and work well with sparse datasets.triangle—Triangle markers provide directional emphasis and visual variety.
Set the marker shape through the markers.type property.
The following example demonstrates how to configure different marker shapes for the Heatmap chart.
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:
Pan and Zoom
Enable panning and zooming to allow users to explore large Heatmap datasets interactively. The Panning and Zooming features let users:
- Pan—Drag the chart to view different areas of the data.
- Zoom—Use mouse wheel or pinch gestures to zoom in and out.
- Selection zoom—Select a rectangular area to zoom into specific regions.
Configure panning and zooming through the pannable and zoomable properties.
The following example demonstrates how to configure the panning and zooming features for the Heatmap chart.
Tooltips
Tooltips display detailed information when users hover over Heatmap cells. Configure tooltips to show the exact values, category labels, or custom formatted data for each point.
For detailed tooltip configuration options, refer to the Tooltips article.
The following example demonstrates how to configure series tooltips for the Heatmap chart.
Crosshairs
Crosshairs provide visual guides that help users identify the exact X and Y coordinates when hovering over the Heatmap. They display as horizontal and vertical lines that intersect at the pointer position, making it easier to trace values back to their corresponding axis labels.
For detailed crosshair configuration options, refer to the Crosshairs article.
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