Implement LinearGauge as an Indicator for the Heatmap Chart

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI for Angular

Description

How can I implement the Kendo UI for Angular LinearGauge to indicate the currently hovered series value in the Heatmap Chart?

Solution

1. Implement both Kendo UI for Angular Heatmap Chart and LinearGauge.

2. Set the needed scale ranges of the LinearGauge component with the colors that reflect the color configuration of the Heatmap Chart.

3. Use the seriesHover event to change the value of the linear pointer in the LinearGauge.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...