Change cursor to pointer when hovering over a label in axisLabel

[Troy]

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

[Iliana Dyankova]

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

[Troy]

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

Thanks,

Troy

[Iliana Dyankova]

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

[Valued User]

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?

[Iliana Dyankova]

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

[NaveRonen]

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

[Iliana Dyankova]

Hi Nave,

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

Regards,
Iliana Nikolova
Telerik

 

 

[NaveRonen]

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.

[Iliana Dyankova]

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

 

 

[Alex Hajigeorgieva]

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