New to Kendo UI for Angular? Start a free 30-day trial
Displaying Custom Axis Labels Tooltips in the Chart
Environment
Product | Progress® Kendo UI® for Angular Charts |
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:
- Use the
bind
method to attach themouseenter
andmouseleave
events to the Chart's surface element. - 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.
Change Theme
Theme
Loading ...