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. Bind to the mouseenter and mouseleave events of 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.

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