# Plotlyjs - merged legend for both subplots

**URL:** <https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873>\
**Category:** Visualization\
**Tags:** plotting, plotlyjs\
**Created:** [May 10, 2021, 10:10am UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873 "2021-05-10T10:10:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stej](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stej](https://discourse.julialang.org/u/stej)\
**Post date:** [May 10, 2021, 10:10am UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873/1 "2021-05-10T10:10:17Z")

</div>

Hi, this is followup of [Plotly.js - stacked bars in subplots - #3 by stej](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/3)

I have this code

```julia
###########

using PlotlyJS, Dates

dates = [Date(2021, 05, 08), Date(2021, 05, 09), Date(2021, 05, 10)]
trace1 = bar(; x = dates, y = [15, 1, 6], name = "Buy - euro", barmode="stack")
trace2 = bar(; x = dates, y = [2, 5, 4], name = "Buy - usd", barmode="stack")
tracesBuy = [trace1, trace2]

p1 = plot(tracesBuy, Layout(;barmode="stack", title="Buy"))

trace3 = bar(; x = dates, y = [-10, -5, -8], name = "Sell - euro", barmode="stack")
trace4 = bar(; x = dates, y = [-15, -6, -3], name = "Sell - usd", barmode="stack")
tracesSell = [trace3, trace4]
p2 = plot(tracesSell, Layout(;barmode="stack", title="Sell"))
p = [p1, p2]
p.plot.layout["barmode"] = "stack"
p

```

The result looks like this

 ![image](https://global.discourse-cdn.com/julialang/original/3X/6/7/673add11ae92802c81911c5c8c37ba165879cb67.png)

Is it somehow possible to have merged legend and the related bars to have the same color?

E.g.

- bars for EUR red in both subplots
- bars for USD blue in both subplots
- the legend just contains 2 lines: USD, EUR and is clickable  
 → if I click USD, just USD bars will be visible in both subplots

Is that even possible?  
Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Rudi79](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rudi79/32/3884_2.png) [@Rudi79](https://discourse.julialang.org/u/Rudi79)\
**Post date:** [May 10, 2021, 12:03pm UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873/2 "2021-05-10T12:03:39Z")

</div>

Try something like

```julia
tr6 = scatter(b2, x = :tag, y = :loess, group = :variable, legendgroup = (df) -> df[1,:variable], line_color = (df) -> df[1,:variable])

```

---

<div class="post-metadata">

**Author:** ![stej](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stej](https://discourse.julialang.org/u/stej)\
**Post date:** [May 10, 2021, 12:08pm UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873/3 "2021-05-10T12:08:06Z")

</div>

To show better what I’d like.

After rendering:

 ![2021-05-10_12h09_54](https://global.discourse-cdn.com/julialang/original/3X/8/5/85b46e43e83bdb11d7f0a7bbad92249b041b9872.png)

If I don’t want to show “usd”, just “euro”:

 ![2021-05-10_12h09_55](https://global.discourse-cdn.com/julialang/original/3X/1/1/11f3d0306f868e6c8d8a6e719ee3f36791b35a69.png)

---

<div class="post-metadata">

**Author:** ![Rudi79](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rudi79/32/3884_2.png) [@Rudi79](https://discourse.julialang.org/u/Rudi79)\
**Post date:** [May 10, 2021, 12:53pm UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873/4 "2021-05-10T12:53:33Z")

</div>

Applying my snippet to your code yields

```julia
using PlotlyJS, Dates

dates = [Date(2021, 05, 08), Date(2021, 05, 09), Date(2021, 05, 10)]
trace1 = bar(; x = dates, y = [15, 1, 6], name = "Buy - euro", barmode="stack", legendgroup = "euro", marker_color = "Orange")
trace2 = bar(; x = dates, y = [2, 5, 4], name = "Buy - usd", barmode="stack", legendgroup = "usd", marker_color = "Green")
tracesBuy = [trace1, trace2]

p1 = plot(tracesBuy, Layout(;barmode="stack", title="Buy"))

trace3 = bar(; x = dates, y = [-10, -5, -8], name = "Sell - euro", barmode="stack", legendgroup = "euro", showlegend = false, marker_color = "Orange")
trace4 = bar(; x = dates, y = [-15, -6, -3], name = "Sell - usd", barmode="stack", legendgroup = "usd", showlegend = false, marker_color = "Green")
tracesSell = [trace3, trace4]
p2 = plot(tracesSell, Layout(;barmode="stack", title="Sell"))
p = [p1, p2]
p.plot.layout["barmode"] = "stack"
p

```

---

<div class="post-metadata">

**Author:** ![stej](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stej](https://discourse.julialang.org/u/stej)\
**Post date:** [May 10, 2021, 1:41pm UTC](https://discourse.julialang.org/t/plotlyjs-merged-legend-for-both-subplots/60873/5 "2021-05-10T13:41:12Z")

</div>

Great, thanks! Exactly what I was looking for. I expected the solution will be more complicated. It looks like there is a lot of magic inside the library… 🙂