dragHandle cursor not working

[lfse-slafleur]

Expected behaviour

Setting dragDrop.dragHandle.cursor should change the cursor to the specified CSS class while hovering over the draggable point and while dragging.

Actual behaviour

Mouse cursor does not change at all.

Live demo with steps to reproduce

https://jsfiddle.net/kLmgn3ox/2/

Just drag any point.

Product version

9.2.2

Affected browser(s)

Firefox, Edge, Chrome

[raf18seb]

Hi @TNO-SlaFleur! Thanks for creating the ticket.

Probably you wanted to change the cursor when hovering the line series' point. To achieve it, please see https://api.highcharts.com/highcharts/series.line.cursor

The dragDrop.dragHandle.cursor option is for handles only. Handles can be visible when hovering over the points in this simplified demo: https://jsfiddle.net/BlackLabel/sht6nL84/
Indeed it has never worked. There is a bug here

highcharts/ts/Extensions/DraggablePoints.ts

Lines 2507 to 2509 in 1d87f26

	handleAttrs.cursor = handleOptions.cursor ||
	(val.axis === 'x') !== !!chart.inverted ?
	'ew-resize' : 'ns-resize';

The bracket is missing so the ternary conditional is incorrect.

[lfse-slafleur]

Hi @raf18seb !

Thanks for the quick response. You are right that I would like to change the cursor when hovering the line series' point. Specifically, some points are y-draggable and some are both x- and y-draggable in my situation. Therefore, I wanted to change the cursor per point. The option you referenced (series.line.cursor) sets the cursor for the whole line.

That is why I expected a drag handle to be included per point as well, but based on your message and demo I see there is a difference between what I understood as a drag handle (hidden element on top of each point which captures mouse actions) and what is an actual drag handle (namely, a visible point which may be dragged on some element). Thank you for explaining the difference.

Am I right there is currently not a way to set the cursor on a per point basis for a line series through the Highcharts API?
If not, shall I add a separate enhancement ticket?

Thank you!

Regards,

Sebastiaan

[raf18seb]

Dear Sebastiaan,

There is an easy way to show a specific cursor when hovering over a specific point, please see a demo showing it: https://jsfiddle.net/BlackLabel/yg7ce5t9/

[lfse-slafleur]

@raf18seb Thank you for sharing an example on how to change the cursor on a point-by-point basis!