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?
Thank you. That worked great. I also added the following to handle when the mouse pointer is over the chart title.
var titleOffset = chartH - $chart.options.gridAreaRect.height - labelX;
And in the return statement, I added:
pointerY < titleOffset
Hi jewels03,
If you want to prevent your custom cursor over the label are then you have to detect this area. It is possible by getting labels width and combine them with height and with of the chart. Then you can use mouse events to take pointer X and Y and to determine whether the pointer is over the label area. I prepared small sample where you can observe that. I used the following events:
Also the css class that changes the cursor have to have !important rule, because during zooming and dragging the chart set inline style that overrides cursor rule. I hope this resolves your issue!
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?
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!