Change the cursor on hover over axes?

plotly.js
1

Depending on where I hover, I can stretch axes, or I can shift them. I’ve no clue which so I take a few stabs at it and eventually can get the axis to transform as I want.

Seems like there should be a way for me to communicate to the user what is about to happen, e.g. the cursor changes to a NSEW “compass arrows” shape when the hover means shift and keep the existing up/down when the cursor means to stretch.

Regards, John

2

Picture1
Picture11752×788 236 KB

Well now that is intriguing. If you go to browser and click on Elements and then burrow down through class plotly-container then you see that each y axis has its own class. In the screenshot above, I’ve highlight yaxis4.

That class seems to map events to different sections of the y-axis, specifically there is an ndrag on the top, then an nsdrag in the middle and an sdrag on the bottom.

They appear to be associated with CSS cursors “cursor-n-resize”, “cursor-ns-resize” and “cursor-s-resize”. So if I can find where those are defined (or overwrite them) then I’ll get different cursors for pan vs zoom !!

3

The plot thickens (the plotly thickens?! :slight_smile: )

If I go here then I see a bunch of possible cursors and the cursor should change as I mouse over each of them.

But the cursor for n-resize and s-resize are wrong. At least for me on Chrome 125.0.6422.77 (Official Build) (64-bit) and Edge Version 125.0.2535.67 (Official build) (64-bit).

So it is not a Plotly issue, per se. My patch is that after including plotly.min.js then I write::

<style>
.js-plotly-plot .plotly .cursor-ns-resize { cursor: grab }
</style>

And now the cursor changes. The grab actually makes more sense to me anyway.

1 Like