New to Kendo UI for jQuery? Download free 30-day trial

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

In this article