I have a chart that is zoomable. When it is zoomed in and the mouse is over the zoomed-in area, the cursor is the default. My customer does not like the default cursor because it is not clear to them that they can click and drag the chart around. They want the cursor be either the hand or the move arrows. I was able to change the cursor using $('#chart canvas').css('cursor', 'pointer'); however, the cursor is changed over the whole chart, not just the zoomed-in area.
How can I change the cursor when the user mouses over the data part of the chart?
Hi jewels03,
You are able to check the chart on its every refresh, by using its event "refreshCompleted". For more information about chart API please use this documentation: http://www.igniteui.com/help/api/2015.2/ui.igdatachart .
Then in the event handler just check if the chart is zoomed and add to its element some class that will change the cursor. It should be something like this:
$("#chart").data().igDataChart.element.on("igdatachartrefreshcompleted", function(){ /* check for zoom and set the new class that changes pointer on hover */ });
Please let me know whether this approach helps you!
Thank you. That was helpful. However, the cursor is changed over the whole chart, including the axis labels. I only want the cursor to be changed over the actual movable/zoomable area of the chart. I'm using $('#chart canvas').css('cursor', 'move'); What is the selector for the area of the chart that only includes the data, not the labels?