Change cursor to pointer when hovering over a label in axisLabel

11 posts, 0 answers
  1. Troy
    Troy avatar
    10 posts
    Member since:
    Mar 2012

    Posted 19 Nov 2013 Link to this post

    When I hover the mouse over a label on the axisLabel (vertical axis in my screenshot) I'd like the cursor to change to a pointer instead of the text insertion cursor because I have a click event setup using the axisLabelClick event. The attached screenshot shows the text insertion pointer when I hover over the '6th st property' label  of a bar chart. I want it to be the 'finger pointer' instead. Is this possible?

    Thanks,

    Troy
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Nov 2013 Link to this post

    Hi Troy,

    This scenario is not supported out-of-the-box by Kendo UI Chart. As a possible workaround I can suggest using the following CSS rule: 
    #chart text[data-model-id] {
        cursor: pointer;
    }

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Troy
    Troy avatar
    10 posts
    Member since:
    Mar 2012

    Posted 21 Nov 2013 Link to this post

    That almost works...is there a way for me to restrict it to the text elements on the vertical axis?

    Thanks,

    Troy
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Nov 2013 Link to this post

    Hi Troy,

    In order to achieve this you should specify the valueAxis labels id-s in the selector. Something like:
    #chart text[data-model-id="k10006"],
    #chart text[data-model-id="k10010"] {
        cursor: pointer;
    }
     
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Valued User
    Valued User avatar
    1 posts
    Member since:
    Mar 2013

    Posted 25 Feb 2014 in reply to Iliana Nikolova Link to this post

    How is this a solution?  For anything loading with dynamic data we will have no idea what the ids are until the page loads.  If an axis label click function is defined, the default cursor should be the pointer... and we should definitely have API access to the styling of those SVG nodes.  There are a number of people that have posted looking for this feature - is this something you guys plan to support using something other than an unusable hack?
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Feb 2014 Link to this post

    Hello Aaron,

    I posted a reply in your other thread on the same subject, however I am pasting my answer here too:

    I am afraid the discussed functionality is not supported out-of-the-box by Kendo UI Chart and all workarounds we can suggest have drawbacks / will not work in all cases. We will appreciate it if you submit this idea as a feature request at our UserVoice page - this way the community would be able to vote and comment it. The more votes the suggestion collects, the higher priority will have when planning for a release!

    Regards,
    Iliana Nikolova
    Telerik
  7. NaveRonen
    NaveRonen avatar
    5 posts
    Member since:
    Feb 2013

    Posted 23 Mar 2014 in reply to Iliana Nikolova Link to this post

    before the new release of 14Q1, it was possible to write html/svg as the label text, and it was rendered properly, so i have used it to add a class to just the axis i needed, e.g.  :
    <tspan class='PointerCursor">the label</tspan>

    tspan is like span under svg

    with the new release, the charts are now rendered badly, but maybe there is a way to make the charts render like they used to

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Mar 2014 Link to this post

    Hi Nave,

    Please take a look at this thread where my colleague Tsvetomir has already replied to the same question. 

    Regards,
    Iliana Nikolova
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  9. NaveRonen
    NaveRonen avatar
    5 posts
    Member since:
    Feb 2013

    Posted 25 Mar 2014 in reply to Iliana Nikolova Link to this post

    Hi,

    your colleague was actualy replying to me.  and it is not the same issue at all.

    my solution for this thread works very well, as long as you don't have the latest 14Q1 version

    and if you will roll back on this breaking behavior or atleast add a switch to it,  this thread will have a good solution.

  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Mar 2014 Link to this post

    Hi Nave,

    We are going to roll back the discussed change in the internal builds. Please excuse us for the temporary inconvenience.

    Regards,
    Iliana Nikolova
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1037 posts

    Posted 10 May 2018 Link to this post

    Hello,

    Just to update the thread as it is quite outdated.

    The recommended way is to create a custom visual and set its cursor property:

    http://dojo.telerik.com/iwiBiNUT

    labels: {
      visual: function(e) {
        var visual = e.createVisual();
        visual.options.cursor = 'pointer';
        return visual;
      }
    }

    API Reference: https://docs.telerik.com/kendo-ui/api/javascript/drawing/element/configuration/cursor

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top