This is a migrated thread and some comments may be shown as answers.

Change cursor to pointer when hovering over a label in axisLabel

10 Answers 291 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Troy
Top achievements
Rank 1
Troy asked on 19 Nov 2013, 01:35 PM
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

10 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 19 Nov 2013, 02:24 PM
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!
0
Troy
Top achievements
Rank 1
answered on 22 Nov 2013, 12:16 AM
That almost works...is there a way for me to restrict it to the text elements on the vertical axis?

Thanks,

Troy
0
Iliana Nikolova
Telerik team
answered on 25 Nov 2013, 10:08 AM
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!
0
Valued User
Top achievements
Rank 1
answered on 25 Feb 2014, 08:40 PM
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?
0
Iliana Nikolova
Telerik team
answered on 27 Feb 2014, 09:18 AM
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
0
NaveRonen
Top achievements
Rank 1
answered on 23 Mar 2014, 12:54 PM
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

0
Iliana Nikolova
Telerik team
answered on 25 Mar 2014, 02:27 PM
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.

 
0
NaveRonen
Top achievements
Rank 1
answered on 25 Mar 2014, 02:43 PM
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.

0
Iliana Nikolova
Telerik team
answered on 27 Mar 2014, 11:47 AM
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.

 
0
Alex Hajigeorgieva
Telerik team
answered on 10 May 2018, 10:27 AM
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.
Tags
Charts
Asked by
Troy
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Troy
Top achievements
Rank 1
Valued User
Top achievements
Rank 1
NaveRonen
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or