# Display (a different) value under scatter point

**URL:** <https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821>\
**Category:** Visualization\
**Tags:** plots, plotlyjs\
**Created:** [May 10, 2018, 5:06pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821 "2018-05-10T17:06:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![biona001](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/biona001/32/16497_2.png) [@biona001](https://discourse.julialang.org/u/biona001)\
**Post date:** [May 10, 2018, 5:06pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/1 "2018-05-10T17:06:09Z")

</div>

Plotlyjs is giving me a plot that doesn’t seem to be finding the closest scatter point to my cursor (indicated by black arrow):

> using Plots  
> plotlyjs()  
> scatter(x1, x2)

 ![Slide1](https://global.discourse-cdn.com/julialang/original/3X/f/e/fe92246bcbc3e3a1bbd4f94d5071e967810dae56.jpeg)

My question is:

1. How can I display the name of each point based on x- and y- coordinate of my cursor?
2. If I actually want the displayed value to be different, how can I change that? For instance, I am plotting the 5th and 6th column of a dataframe (see image below), but when I hover over the points, I want to display the corresponding values in the 3rd and 4th column:

 ![fdsa](https://global.discourse-cdn.com/julialang/original/3X/c/9/c977fcb9c79d465fbcd4c8e52ef28b7b07d24cd0.png)

---

<div class="post-metadata">

**Author:** ![mkborregaard](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkborregaard/32/556_2.png) [@mkborregaard](https://discourse.julialang.org/u/mkborregaard)\
**Post date:** [May 10, 2018, 5:40pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/2 "2018-05-10T17:40:42Z")

</div>

try the `hover` attribute

---

<div class="post-metadata">

**Author:** ![biona001](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/biona001/32/16497_2.png) [@biona001](https://discourse.julialang.org/u/biona001)\
**Post date:** [May 10, 2018, 8:02pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/3 "2018-05-10T20:02:26Z")

</div>

Thank you, I was able to add the name to the points. However the plots are still not displaying the node that is closest to my cursor. Do you know how to fix this?

 ![Slide1](https://global.discourse-cdn.com/julialang/original/3X/5/a/5a0c4051475ae680a0aa6133564d002c925aa25f.jpeg)

For future reference, this is how I did it:

> #construct the name array  
> name = Array{String}(size(x, 1))  
> for i in 1:length(name)  
> name[i] = x[i, 3] \* " & " \* x[i, 4]  
> end

> scatter(x[:empiric\_kinship], x[:theoretical\_kinship],  
> xlabel = “empiric kinship”, ylabel = “theoretical kinship (θ)”,  
> hover = name)

---

<div class="post-metadata">

**Author:** ![mkborregaard](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkborregaard/32/556_2.png) [@mkborregaard](https://discourse.julialang.org/u/mkborregaard)\
**Post date:** [May 10, 2018, 8:10pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/4 "2018-05-10T20:10:41Z")

</div>

Yes there’s something fishy going on with the plotly hovers and the mouse position, always have been. Not even sure this is Plots creating trouble or happens in plotly itself.  
It’s actually really annoying, but not sure how to fix.

---

<div class="post-metadata">

**Author:** ![cstjean](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cstjean/32/1444_2.png) [@cstjean](https://discourse.julialang.org/u/cstjean)\
**Post date:** [May 11, 2018, 12:20am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/5 "2018-05-11T00:20:14Z")

</div>

There’s a button in the top right corner of the plot that switches between “show all points” and “show closest point”. Have you tried that?

---

<div class="post-metadata">

**Author:** ![biona001](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/biona001/32/16497_2.png) [@biona001](https://discourse.julialang.org/u/biona001)\
**Post date:** [May 11, 2018, 12:31am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/6 "2018-05-11T00:31:05Z")

</div>

Ahhhhhhhhhhh I feel stupid. Thank you so much. It works!

---

<div class="post-metadata">

**Author:** ![Ralph\_Smith](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ralph_smith/32/10344_2.png) [@Ralph\_Smith](https://discourse.julialang.org/u/Ralph_Smith)\
**Post date:** [May 11, 2018, 1:38am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/7 "2018-05-11T01:38:38Z")

</div>

If you want to change the behavior programatically, you can do

```julia
p=plot(); PlotlyJS.relayout!(p.o,hovermode="closest")

```

Alternative values are `"x"` (the default) and `"y"` (which doesn’t seem to be accessible from the GUI).

---

<div class="post-metadata">

**Author:** ![mkborregaard](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkborregaard/32/556_2.png) [@mkborregaard](https://discourse.julialang.org/u/mkborregaard)\
**Post date:** [May 11, 2018, 5:38am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/8 "2018-05-11T05:38:06Z")

</div>

What! I feel even more stupid 😮  
❤

---

<div class="post-metadata">

**Author:** ![cyrieln](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cyrieln/32/24612_2.png) [@cyrieln](https://discourse.julialang.org/u/cyrieln)\
**Post date:** [April 30, 2021, 6:54pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/9 "2021-04-30T18:54:02Z")

</div>

@Ralph_Smith I’m having trouble implementing your line;

```julia
using Plots
using PlotlyJS: relayout!
plotlyjs()

x = rand(10)
y = rand(10)

p = plot(x, y)
PlotlyJS.relayout!(p.o, hovermode="closest")

```

Whatever `p.o` is, it is `nothing`;

```julia
ERROR: LoadError: MethodError: no method matching relayout!(::Nothing; hovermode="closest")
Closest candidates are:
  relayout!(::PlotlyJS.SyncPlot) at /root/.julia/packages/PlotlyJS/h3GxO/src/display.jl:196 got unsupported keyword argument "hovermode"
  relayout!(::PlotlyBase.Layout) at /root/.julia/packages/PlotlyBase/YSDKA/src/api.jl:116 got unsupported keyword argument "hovermode"
  relayout!(::PlotlyBase.Layout, ::AbstractDict; kwargs...) at /root/.julia/packages/PlotlyBase/YSDKA/src/api.jl:116

```

---

<div class="post-metadata">

**Author:** ![bearylogical](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bearylogical/32/28535_2.png) [@bearylogical](https://discourse.julialang.org/u/bearylogical)\
**Post date:** [August 25, 2021, 10:38am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/10 "2021-08-25T10:38:18Z")

</div>

Hey, I found a fix. there is a function within the plots backend that otuputs `SyncPlot` to be used in relayout. Also note that `relayout` is called without the “!”

```julia

using Plots
using PlotlyJS: relayout
plotlyjs()

x = rand(10)
y = rand(10)
p = Plots.plot(x, y)
PlotlyJS.relayoutPlots.plotlyjs_syncplot(p), hovermode="closest")

```

Hope that helps!

---

<div class="post-metadata">

**Author:** ![cyrieln](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cyrieln/32/24612_2.png) [@cyrieln](https://discourse.julialang.org/u/cyrieln)\
**Post date:** [September 28, 2021, 6:14pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/11 "2021-09-28T18:14:16Z")

</div>

> [@bearylogical](#):
>
> ```julia
> using Plots
> using PlotlyJS: relayout
> plotlyjs()
> 
> x = rand(10)
> y = rand(10)
> p = Plots.plot(x, y)
> PlotlyJS.relayoutPlots.plotlyjs_syncplot(p), hovermode="closest")
> 
> ```

Hmmm, I’m getting

```julia
julia> PlotlyJS.relayoutPlots.plotlyjs_syncplot(p, hovermode="closest")
ERROR: UndefVarError: relayoutPlots not defined
Stacktrace:
 [1] getproperty(x::Module, f::Symbol)
   @ Base .\Base.jl:26
 [2] top-level scope
   @ REPL[11]:1

```

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [September 28, 2021, 8:00pm UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/12 "2021-09-28T20:00:31Z")

</div>

The following works fine:

```julia
using Plots; plotlyjs()
using PlotlyJS: relayout
x = rand(10)
y = rand(10)
p = Plots.plot(x, y)
PlotlyJS.relayout!(p.o,hovermode="closest")

```

---

<div class="post-metadata">

**Author:** ![bearylogical](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bearylogical/32/28535_2.png) [@bearylogical](https://discourse.julialang.org/u/bearylogical)\
**Post date:** [September 29, 2021, 7:54am UTC](https://discourse.julialang.org/t/display-a-different-value-under-scatter-point/10821/13 "2021-09-29T07:54:43Z")

</div>

yeah i think i made a typo at the top.