How can I enable Category Label Tooltip in the BarChart?

[Bob]

I am upgrade and existing Kendo UI for jQuery  based app to use KendoReact and I am having  problems getting tooltips to displayed on the BarChart Category label.

In my Kendo UI for Query app, I have implemented the code enable the tooltips as described in the following Article (https://docs.telerik.com/kendo-ui/controls/charts/how-to/integration/tooltip-for-category-axis-labels?_ga=2.75079313.2031723793.1571781435-2043405146.1571781435), and it works as expected.

In KendoReact, setting the 'labelVisual.options.tooltip' property is not displaying tooltips. 

 

I have tried to write custom code to work around this limitation, looking for a trigger to render a css hover driven tooltip or to active an instance of KendoReact Tooltip component.  I have tried making the Category label a shape and using a popup window for the tooltip as described in the React kendo Docs(https://www.telerik.com/kendo-react-ui/components/drawing/tooltip/), with no success.

Has anyone implement such code or have any recommendation on how to implement this?

I have tried to solve this problem using an SVG based solution as described in the following
article (http://www.petercollingridge.co.uk/tutorials/svg/interactive/tooltip/), however I have not found a way to assign a class to the BarChart label svg element and furthermore cannot use this solution.
If you reference to the Kendo Documentation (https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/tooltips/) for the BarChart, it doesn't say it has support for Category label tooltip as in the Kendo UI for jQuery.

[Stefan]

Hello, Bob,

Thank you for the information.

Indeed, I try the same approach and it was not working on my end as well.

Still, I noticed that the function was called way more times than it is needed, and I can assume that this is caused by an issue which we are working on.

I assume that after this issue is fixed, the Tooltip will be shown as expected.

I will leave this ticket opened, and keep you updated.

Regards,
Stefan
Progress Telerik

[Stefan]

Hello, Bob,

Thank you for your patience.

I was able to make an example of this.

The approach is a little different in React and requires using the Popup component and subscribing for the on mouse leave and on mouse enter events of the Chart surface.

This is an example:

https://stackblitz.com/edit/react-muv6yh?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Bob]

Thank you Stefan.  That worked!