The following implementation shows mouseover event with cursor pointer on y axis title label. It works and functional.
However, I want to implement mouseover event with cursor pointer on y axis (numeric axis) as well.
Asked
Active
Viewed 433 times
0
casillas
- 16,351
- 19
- 115
- 215
-
It would be hard to do as numeric axis is composed of single "g" SVG elements. You could still implement showing "hand" pointer on values though. – SzybkiSasza Jun 10 '15 at 15:04
-
actually I meant to add a hand pointer on y values. – casillas Jun 10 '15 at 15:18
3 Answers
2
You can apply the same color trick to the axis labels:
valueAxis: {
labels: {
format: "N0",
color: "rgba(60,60,60, 0.9995)"
},
$(document).on("mouseover", '#chart text[fill="rgba(60,60,60, 0.9995)"]', function(){
$('#chart text[fill="rgba(60,60,60, 0.9995)"]').css("cursor", "pointer");
});
Updated DEMO
In this example I use the same color for title and labels, you could easily use a different color
ezanker
- 24,628
- 1
- 20
- 35
1
If you can add some id or class then it is good but in your code I cant find class so I used stroke
$(document).on("mouseover", '#chart text[stroke="none"]', function(){
$('#chart text[stroke="none"]').css("cursor", "pointer");
});
Keval Bhatt
- 6,224
- 2
- 24
- 40
-
Hi Keval it works but applies both x and y axis. I have upvoted your effort. You can add a class if it is neccessary on my code. – casillas Jun 10 '15 at 15:15
-
can you add id or class on it because in d3 we can add id or class – Keval Bhatt Jun 10 '15 at 15:15
-
Unfortunately KendoUI does not yet provide for applying classes to chart components. – ezanker Jun 10 '15 at 15:23
0
there is actually a supported option with a custom visual:
categoryAxis: [{
labels: {
color: "rgba(60,60,60, 0.9995)",
visual: function(e) {
var visual = e.createVisual();
visual.options.cursor = 'pointer';
return visual;
}
}
}]
Alex Bubblemaster
- 46
- 4