Use Drawing API to Show Custom Tooltip for categoryAxis Chart Labels
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I display a tooltip for categoryAxis labels by using the Drawing library?
Solution
It is possible for you to display a tooltip for categoryAxis labels through the Drawing library.
The following example demonstrates how to achieve this behavior. Note that the tooltip is displayed when hovering a categoryAxis label.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [{
value: 1
}, {
value: 2
}, {
value: 3
}]
}],
categoryAxis: {
categories: ["Cat 1", "Cat 2", "Cat 3"],
labels: {
visual: function (e) {
// The original label visual
var labelVisual = e.createVisual();
// Set the drawing tooltip options
// https://demos.telerik.com/kendo-ui/drawing/tooltip
labelVisual.options.tooltip = {
content: e.text
};
return labelVisual;
}
}
}
});
</script>