How can I enable Category Label Tooltip in the BarChart?

4 posts, 0 answers
  1. Bob
    Bob avatar
    2 posts
    Member since:
    Jun 2019

    Posted 23 Oct 2019 Link to this post

    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.



  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 24 Oct 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 25 Oct 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Bob
    Bob avatar
    2 posts
    Member since:
    Jun 2019

    Posted 25 Oct 2019 in reply to Stefan Link to this post

    Thank you Stefan.  That worked!
Back to Top