Displaying Custom Axis Labels Tooltips in the Chart

Environment

Description

How can I display a custom tooltip when hovering the axis labels of the Kendo UI for Angular Chart?

Solution

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

To display a custom tooltip when hovering the Chart axis labels:

1. Use the bind method to attach the mouseenter and mouseleave events to the Chart's surface element.
2. Toggle a Popup with dynamic content based on the hovered label.

In the Popup, you can display a shortened version of the text or a different text entirely. The content is transferred to the axis label visual, a low-level drawing element, and displayed when it is hovered.

You can combine the implementation described in this article with Render Custom Tooltips for the Legend Element in the Chart as they share similar logic.

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