React kendo bar chart, How to add a tooltip when hovering over the x-axis labels?

Question

I am using React Kendo bar chart library, trying to add a tooltip when hovering over the x-axis "categoryAxis" labels, but there is no way or method offered by Kendo to achieve this, any thoughts?

There might be a way with using the visual method within categoryAxis.labels, but I'm not sure how

Answer 1

Visual method will give you most control. However, for something more simple, you could assign a unique color to the category axis labels so you can select them easily (e.g. your regular color with opacity of 0.9999)

labels: {
  color: "rgba(31,31,31,0.9999)"
},

Then in the render event of the chart, select all SVG TEXT elements within the chart that have that color and instantiate a KendoTooltip on each one.

$("#chart").kendoChart({
  categoryAxis: {
    categories: [2012, 2013, 2014, 2015],
    labels: {
      color: "rgba(31,31,31,0.9999)"
    },
  },
  series: [
    { data: [1, 2,1,3] }
  ],
  render: function(e) {
    e.sender.element.find("text").each(function () {
        if (this.getAttribute("fill") == "rgba(31,31,31,0.9999)") {
        var val = $(this).text();
            
        $(this).kendoTooltip({
          position: "bottom",
          offset: 20,
          callout: false,
          content: `Hi, I'm a tooltip for label with value of ` + val,
        });
      }      
    });
  }
});

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.6.0/default/default-ocean-blue.css"/>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.718/js/kendo.all.min.js"></script>
    
    <div id="chart"></div>

Here is a DOJO DEMO