Render Custom Tooltips for the Legend Element in the Chart

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

How can I render tooltips for the Legend element of the Kendo UI for Angular Chart?

Solution

The Chart does not provide a built-in Tooltip for the Legend.

To display a custom Tooltip when hovering the Chart Legend items:

1. Use the bind method to attach the mouseenter and mouseleave events to the Chart's surface element.
2. Use the visual property of the Legend items to add the desired tooltip content.
3. Toggle a Popup with dynamic content based on the hovered Legend item.

You can combine the implementation described in this article with Rendering Tooltips for the Chart Axis Labels as they share similar logic.

The following example demonstrates the above approach.

Change Theme

Theme

Loading ...