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

View Source
Change Theme:

In this article

Not finding the help you need?