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

Displaying Custom Axis Labels Tooltips in the Chart


ProductProgress® Kendo UI® for Angular Charts


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


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.

View Source
Change Theme:

In this article

Not finding the help you need?