Change the mouse cursor when panning/zooming

Charts.kt
#1

Hello,
Is there a possibility to change the mouse cursor while panning/zooming?

#2

This is a good idea, we should track it, but according to our talk, let’s set it at “minor” priority: CHRT-235

#3

Hello @pierre

Regarding the cursor pointer, we have a requirement now.

While panning, we would like to change the cursor pointer to “hand symbol”.

Please let us know how to do this? Or, please include this in the next release.

Many Thanks!

#4

Hi @bhargava,

I’m working on an overhaul of the events system, I’ll see if this can be easily done.

#5

See CHRT-246

#6

Ok Thanks

#7

Hi @zoltan , @bhargava ,

Due to the multiplatform nature of charts, it is difficult to change the displayed cursor, it would be done “outside” of charts (for example using the CSS style cursor for a JS charting application).

What I can propose is some sort of a “sub-icon”, something like this

image

Or you can handle it with CSS styling from your JS app and call it via your custom getChartActionOnUserEvent lambda.

#8

Hi @zoltan @bhargava, to follow up the talk we had a few days ago, this is a sample script to call a native JS styling function from your chart code:

In your web app as JS code, put something like this:

<script>
    function change_cursor(chartIndex, cursorStyle) {
        var canvas = document.getElementsByTagName("canvas")[chartIndex]
        canvas.style.cursor = cursorStyle;
    }
</script>

Then declare this function as an external function in your kotlin code:

external fun change_cursor(chartIndex: Int, cursorStyle: String)

Now you can use this directly inside your Chart code like this for example:

(...)
getChartActionOnUserEvent = {
    if (eventType == EventType.Move) {
        // 0 here is the current chart index
        // you will store this into your own variable
        change_cursor(0, "pointer")
    }
    if (eventType == EventType.Drag) {
        change_cursor(0, "wait")
    }

    defaultChartActionOnUserEvent(this)
}

All standard cursor styles can be found here: HTML DOM Style cursor Property

I think this way is the most efficient way to do what you need.
I tried it and it works as expected :slight_smile:

#9

Thank you for the information.

We solved the issue in a similar way already

1 Like