# Using Blink, Interact and PlotyJS together

**URL:** <https://discourse.julialang.org/t/using-blink-interact-and-plotyjs-together/29241>\
**Category:** Visualization\
**Tags:** question, plotting\
**Created:** [September 27, 2019, 5:50pm UTC](https://discourse.julialang.org/t/using-blink-interact-and-plotyjs-together/29241 "2019-09-27T17:50:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![amit112amit](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/amit112amit/32/10076_2.png) [@amit112amit](https://discourse.julialang.org/u/amit112amit)\
**Post date:** [September 27, 2019, 5:50pm UTC](https://discourse.julialang.org/t/using-blink-interact-and-plotyjs-together/29241/1 "2019-09-27T17:50:18Z")

</div>

Hi.  
As far as I could find, we cannot use `Interact.@manipulate` with `PlotlyJS` in a Jupyterlab notebook to make interactive plots. I was able to use `GR` and `PyPlot` but I prefer using `PlotlyJS` because it allows me to update the curves without redrawing the whole plot and it also gives interactivity like zooming etc.

So I switched from Jupyterlab to `Blink.jl`. The following code almost works:

```julia
using Interact: slider, on, vbox, @dom_str
using PlotlyJS: plot, restyle!, scatter
using Blink: Window, body!

win = Window()
x = collect(0.0:0.01:2π)
y = sin.(x)

trace = scatter(x=x, y=y)
p = plot(trace)

function updateplot(i)
    y = sin.(i*x)
    restyle!(p, 1, y=[y])
end

sli = slider(1:100, label="i")
on(updateplot, sli)

ui = dom"div"(vbox(sli, p))
body!(win, ui)

```

But the size of the plot is a little too big due to which a scroll bar appears and I cannot see the full plot and the slider together. Is there a way to fit things properly so that scroll bar does not appear?

Regards,  
Amit

---

<div class="post-metadata">

**Author:** ![amit112amit](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/amit112amit/32/10076_2.png) [@amit112amit](https://discourse.julialang.org/u/amit112amit)\
**Post date:** [September 28, 2019, 3:26pm UTC](https://discourse.julialang.org/t/using-blink-interact-and-plotyjs-together/29241/2 "2019-09-28T15:26:48Z")

</div>

After looking at the source code of `PlotlyJS.jl`, I found that the following (in addition to the original code) can change the height of the plotting area

```julia
using PlotlyJS: relayout!

relayout!(p, height="80vh")

```

Or we could do some javascript manipulation:

```julia
using Blink: js, JSString
# After the body! function call I need to add some time gap
# for the page to be rendered before I can use some
# javascript manipulation
sleep(1.0)

divid = "plot-" * string(p.plot.divid)
js(JSString("""document.getElementById("$divid").style.height="90vh" """)

```

---

<div class="post-metadata">

**Author:** ![Jorge\_Vieyra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jorge_vieyra/32/6527_2.png) [@Jorge\_Vieyra](https://discourse.julialang.org/u/Jorge_Vieyra)\
**Post date:** [March 12, 2020, 1:19pm UTC](https://discourse.julialang.org/t/using-blink-interact-and-plotyjs-together/29241/3 "2020-03-12T13:19:39Z")

</div>

Hi Amit,

Thanks for the example. However, I tried your code and unfortunately didn’t work for me. I got a `"ERROR: Invalid dependency (must be a url, file or AssetRegistry path)"`

I would like to solve it myself, but I don’t even know where to start with the documentation. Could you point me to the right direction?

Regards,  
Jorge