New to Kendo UI for Angular? Start a free 30-day trial

Implement LinearGauge as an Indicator for the Heatmap Chart

Environment

ProductProgress® 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.

Example
View Source
Change Theme:

In this article

Not finding the help you need?