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.
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 | The value of the data point, if any. |
xField | `string | number` | Yes | The X category of the data point. |
yField | `string | number` | Yes | The Y category of the data point. |
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.
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 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 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:
Panning and Zooming
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:
