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>

See Also

• Chart JavaScript API Reference
• Drawing API
• Aggregate Data in Pie Charts
• Draw on Scatter Plots Surface
• Expand Clickable Area of Points