# PlotlyJS Buttons question

**URL:** <https://discourse.julialang.org/t/plotlyjs-buttons-question/92577>\
**Category:** Visualization\
**Tags:** plotlyjs\
**Created:** [January 5, 2023, 9:56pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577 "2023-01-05T21:56:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marianoarnaiz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/marianoarnaiz/32/19377_2.png) [@marianoarnaiz](https://discourse.julialang.org/u/marianoarnaiz)\
**Post date:** [January 5, 2023, 9:56pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/1 "2023-01-05T21:56:01Z")

</div>

Hi everyone.  
I am trying to understand how to do a couple of simple things with the buttons in PlotlyJS and I wonder if you can help me.

I have some data, and I want to add a dropdown menu to chance the color of each scatter plot independently, all together or make them all disappear.

Here is where I am at, but it does not work as I don’t know how to select just one of my plots.

> using PlotlyJS, Distributions
> 
> x0 = rand(Normal(2, 0.4), 400)  
> y0 = rand(Normal(2, 0.4), 400)  
> x1 = rand(Normal(3, 0.6), 600)  
> y1 = rand(Normal(6, 0.4), 400)  
> x2 = rand(Normal(4, 0.2), 200)  
> y2 = rand(Normal(4, 0.4), 200)
> 
> trace1 = scatter(x=x0, y=y0, mode=“markers”, marker\_color=“DarkOrange”)  
> trace2 = scatter(x=x1, y=y1, mode=“markers”, marker\_color=“Crimson”)  
> trace3 = scatter(x=x2, y=y2, mode=“markers”, marker\_color=“RebeccaPurple”)
> 
> layout = Layout(  
> updatemenus=[  
> attr(  
> buttons=[  
> attr(label=“1 in Red”,  
> method=“restyle”,  
> args=["attr(marker\_color=“red”)]),  
> attr(label=“2 in Blue”,  
> method=“restyle”,  
> args=[attr(marker\_color=“blue”)]),  
> attr(label=“3 in Red”,  
> method=“restyle”,  
> args=[attr(marker\_color=“green”)]),  
> attr(label=“All in Black”,  
> method=“restyle”,  
> args=[attr(marker\_color=“black”)]),  
> attr(label=“Show None”,  
> method=“restyle”,  
> args=[attr(marker\_color=false)]),  
> ],  
> )  
> ],  
> title\_text=“Highlight Clusters”,  
> showlegend=false  
> )
> 
> plot([trace1, trace2, trace3], layout)

---

<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:** [January 6, 2023, 12:40pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/2 "2023-01-06T12:40:30Z")

</div>

Hi Mariano,

Here is one way to do this.  
The reference to understand this is seeing the necessary arguments to the `restyle` method from

> **[Function](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle)**
>
> Detailed examples of Function Reference including changing color, size, log axes, and more in JavaScript.

```julia
using PlotlyJS, Distributions

x0 = rand(Normal(2, 0.4), 400);
y0 = rand(Normal(2, 0.4), 400);
x1 = rand(Normal(3, 0.6), 600);
y1 = rand(Normal(6, 0.4), 400);
x2 = rand(Normal(4, 0.2), 200);
y2 = rand(Normal(4, 0.4), 200);

trace0 = scatter(x=x0, y=y0, mode="markers", marker_color="DarkOrange")
trace1 = scatter(x=x1, y=y1, mode="markers", marker_color="Crimson")
trace2 = scatter(x=x2, y=y2, mode="markers", marker_color="RebeccaPurple")

layout = Layout(
    updatemenus=[
        attr(
            buttons=[
                attr(label="1 in Red",
                    method="restyle",
                    args=[attr(marker_color="red"),
                        [0]]
                ),
                attr(label="2 in Blue",
                method="restyle",
                    args=[attr(marker_color="blue"),
                        [1]]
                ),
                attr(label="3 in Green",
                method="restyle",
                    args=[attr(marker_color="green"),
                        [2]]
                ),
                attr(label="All in Black",
                    method="restyle",
                    args=[attr(marker_color="black")]),
                attr(label="Show None",
                    method="restyle",
                    args=[attr(marker_color=false)]),
            ],
        )
    ],
    title_text="Highlight Clusters",
    showlegend=false
)

plot([trace0, trace1, trace2], layout)

```

---

<div class="post-metadata">

**Author:** ![marianoarnaiz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/marianoarnaiz/32/19377_2.png) [@marianoarnaiz](https://discourse.julialang.org/u/marianoarnaiz)\
**Post date:** [January 6, 2023, 10:14pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/3 "2023-01-06T22:14:47Z")

</div>

Thanks @jd-foster it worked great!

---

<div class="post-metadata">

**Author:** ![marianoarnaiz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/marianoarnaiz/32/19377_2.png) [@marianoarnaiz](https://discourse.julialang.org/u/marianoarnaiz)\
**Post date:** [January 6, 2023, 10:22pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/4 "2023-01-06T22:22:43Z")

</div>

just a question, the numbers (0,1,2), what do they mean? the plot index order?

---

<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:** [January 6, 2023, 10:58pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/5 "2023-01-06T22:58:33Z")

</div>

Yes, this is the indexing to the traces since the first index is 0-based (unlike Julia’s 1-based indexing).

---

<div class="post-metadata">

**Author:** ![marianoarnaiz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/marianoarnaiz/32/19377_2.png) [@marianoarnaiz](https://discourse.julialang.org/u/marianoarnaiz)\
**Post date:** [January 7, 2023, 7:50pm UTC](https://discourse.julialang.org/t/plotlyjs-buttons-question/92577/6 "2023-01-07T19:50:16Z")

</div>

Thanks!