Is there any way to change the cursor that the shapes have by default? I would like some shapes to have the pointing hand cursor.
It seems that there is still no property that allows changing the cursor of the shapes, so I had to tinker with the code in the Plotly.js file to be able to have this feature, hoping that in the future they can incorporate it. I leave you the steps to follow in case someone is also interested in having this functionality in their applications.
In the Plotly.js file we look for the drawShape function, at the beginning there are several variable declarations, there we add the following
const cursor = !!gd.layout.shapes[index].cursor && gd.layout.shapes[index].cursor !== null ? gd.layout.shapes[index].cursor : null
We move down and look for the next line to which we only add the last call for the setCursor
var path = shapeGroup.append('path').attr(attrs).style('opacity', opacity).call(Color.stroke, lineColor).call(Color.fill, fillColor).call(Drawing.dashLine, lineDash, lineWidth).call(setCursor, cursor);
With that we could change the cursor in any way just by adding the property cursor: “your cursor” when creating the shape
As an extra, the setCursor function uses values ​​of the type cursor-cursorname where it stores the name of the cursor, however some cursors are not defined, in my case I needed the closed hand for when the shape is dragged so I had to add it, for that we do a search to find the value “X .cursor-” and where you see several values ​​with this value we add our cursor, in my case I added the following line for the closed hand
"X .cursor-grabbing": "cursor:-webkit-grabbing;cursor:grabbing;",
1 Like