# Plots and click events

**URL:** https://discourse.julialang.org/t/plots-and-click-events/104253
**Category:** Visualization
**Tags:** question, plots, pluto, plotlyjs
**Created:** [September 26, 2023, 10:18am UTC](https://discourse.julialang.org/t/plots-and-click-events/104253 "2023-09-26T10:18:25Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [September 26, 2023, 10:18am UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/1 "2023-09-26T10:18:25Z")

</div>

Hi All,  
I wonder, if any of the Plots’ backends provides an infrastructure to handle click events. According to this page [Click events in Julia](https://plotly.com/julia/click-events/), PlotlyJS should support it. However, I’d be keen to use the plotlyjs() backend if possible.

I’d appreciate any suggestions.

---

<div class="post-metadata">

### Author: ![jheinen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jheinen/32/2787_2.png) [@jheinen](https://discourse.julialang.org/u/jheinen)
#### Post date: [September 26, 2023, 10:50am UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/2 "2023-09-26T10:50:51Z")

</div>

[This](https://github.com/jheinen/GR.jl/blob/master/examples/loc.jl) animation example shows how to query the position of the pointer as well as the state of the buttons in GR.

---

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [September 26, 2023, 11:04am UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/3 "2023-09-26T11:04:06Z")

</div>

Nice! Thank you!

---

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [September 26, 2023, 2:12pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/4 "2023-09-26T14:12:34Z")

</div>

So, GR offers the `samplelocator()` function which returns current x, y coordinates and the clicked mouse button.  
Here is a MWE:

```julia
using GR
plot(rand(10,2))
x, y, button = samplelocator() 
while button == 0 
  @show x,y,button = samplelocator() 
  sleep(.01) 
end

```

The output would be something like this:

```julia
(x, y, button) = samplelocator() = (0.9119601328903655, 0.2168141592920354, 0)
(x, y, button) = samplelocator() = (0.8903654485049833, 0.25442477876106195, 0)
(x, y, button) = samplelocator() = (0.8754152823920266, 0.2743362831858407, 0)
(x, y, button) = samplelocator() = (0.8504983388704319, 0.3075221238938053, 0)
(x, y, button) = samplelocator() = (0.8239202657807309, 0.331858407079646, 0)
(x, y, button) = samplelocator() = (0.813953488372093, 0.3407079646017699, 0)
(x, y, button) = samplelocator() = (0.7940199335548173, 0.3517699115044248, 0)
(x, y, button) = samplelocator() = (0.7558139534883721, 0.36283185840707965, 0)
(x, y, button) = samplelocator() = (0.739202657807309, 0.36283185840707965, 0)
(x, y, button) = samplelocator() = (0.7325581395348837, 0.36283185840707965, 0)
(x, y, button) = samplelocator() = (0.7325581395348837, 0.36283185840707965, 0)
(x, y, button) = samplelocator() = (0.707641196013289, 0.3561946902654868, 0)

```

This is a nice to have _raw_ functionality, but it still falls short of being a proper mouse/click events handler. E.g., it would be hard to capture a click on a data point in the plot using `samplelocator()`.

I wonder if there are some other solutions.

---

<div class="post-metadata">

### Author: ![jheinen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jheinen/32/2787_2.png) [@jheinen](https://discourse.julialang.org/u/jheinen)
#### Post date: [September 26, 2023, 4:04pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/5 "2023-09-26T16:04:19Z")

</div>

Such functionalities (selection mechanisms, “editing” of plots) are provided in the GRM library, which is still WIP.

At this stage, this requirement could only be implemented with QML (there are several demos in the examples directory) - but the selection of points would be done at the application level, which is probably not what you want.

In a future version, your requirement will be solved much more elegantly with GRM.

---

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [September 26, 2023, 4:16pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/6 "2023-09-26T16:16:32Z")

</div>

Thanks! Looking forward to the update!

---

<div class="post-metadata">

### Author: ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [October 2, 2023, 1:20pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/7 "2023-10-02T13:20:15Z")

</div>

Here is an adaptation of that PlotlyJS example ([Click events in Julia](https://plotly.com/julia/click-events/)) but using just the `Plots.jl` interface calls. I’m assuming the `plotlyjs` backend for `Plots.jl` is set up. Hope it helps.

```julia
import Plots
import Plots: KW
Plots.plotlyjs()

color_vec = [fill("blue",10), fill("red",10)]

pl = Plots.scatter(
    1:10,
    rand(10),
    extra_kwargs = KW(
        :series => KW(
                      :showlegend => true,
                      :mode => "lines+markers+text",
                      :name => "blue-green",
                      :marker => KW(:color => color_vec[1], :symbol => "circle", :size => 10),
                      :line => KW(:dash => "dash", :width => 2),
                      ),
    )
)

Plots.scatter!(pl,
   1:10,
   rand(10),
   extra_kwargs = KW(
       :series => KW(
                     :name => "red-purple",
                     :mode => "lines+markers+text",
                     :marker => KW(:color => color_vec[2], :symbol => "circle", :size => 10)                
                     ),
    )
)

display(pl)

p = Plots.backend_object(pl)

using Plots.PlotlyJS.WebIO

on(p["click"]) do data
    color_vec_alt = [fill("green",10), fill("purple",10)]
    symbols = [fill("circle", 10), fill("circle", 10)]
    for point in data["points"]
        color_vec_alt[point["curveNumber"] + 1][point["pointIndex"] + 1] = "gold"
        symbols[point["curveNumber"] + 1][point["pointIndex"] + 1] = "star"
    end
    Plots.PlotlyJS.restyle!(p, marker_color=color_vec_alt, marker_symbol=symbols)
end

```

---

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [October 2, 2023, 4:28pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/8 "2023-10-02T16:28:55Z")

</div>

Great! That works indeed. Thanks for the adaptation of that example!  
The [Plots.backend\_object()](https://docs.juliaplots.org/stable/api/#Plots.backend_object) turns out to be the missing link.

There is a grain of salt though. The trick doesn’t work in Pluto (my initial intention): `Plots.backend_object(pl)` returns `Nothing`.

Base on [WebIO & PlotlyJS support? · Issue #299 · fonsp/Pluto.jl · GitHub](https://github.com/fonsp/Pluto.jl/issues/299), my understanding is that native PlotlyJS is not yet supported by Pluto. So, it seems there is no way to hook into those js events in a Pluto notebook at the moment, isn’t it?

---

<div class="post-metadata">

### Author: ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [October 2, 2023, 9:25pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/9 "2023-10-02T21:25:26Z")

</div>

Have a look at [GitHub - JuliaPluto/PlutoPlotly.jl](https://github.com/JuliaPluto/PlutoPlotly.jl) for using Plotly within Pluto. It also has an example for event listening.

---

<div class="post-metadata">

### Author: ![vvbond](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vvbond/32/10105_2.png) [@vvbond](https://discourse.julialang.org/u/vvbond)
#### Post date: [October 4, 2023, 5:13pm UTC](https://discourse.julialang.org/t/plots-and-click-events/104253/10 "2023-10-04T17:13:20Z")

</div>

Fantastic! Exactly what I was looking for. Thanks a lot for the link!
