# Plotly.js - stacked bars in subplots

**URL:** <https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856>\
**Category:** Visualization\
**Tags:** plotting, plotlyjs\
**Created:** [May 10, 2021, 7:26am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856 "2021-05-10T07:26:08Z")\
**Posts on this page:** 7\
**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, 7:26am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/1 "2021-05-10T07:26:09Z")

</div>

Hi all,

I’m trying to plot stacked bars with PlotlyJS. It looks ok, when I use just one plot, but when I combine two plots together, the bars are no longer stacked.

Example:

```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]

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

```

The plot looks good, the bars are stacked:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/d/ed63acf9d4d19569c1fde6b4926f644138b75f7a.png)

But when I add another plot, they are not stacked anymore.

```julia
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)
[p1, p2]

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/8/6/868fb75b3e9dc96e349c7933a3c851b84c7a3884.png)

Any ideas, what’s wrong here?

---

<div class="post-metadata">

**Author:** ![qsong](https://avatars.discourse-cdn.com/v4/letter/q/d07c76/32.png) [@qsong](https://discourse.julialang.org/u/qsong)\
**Post date:** [May 10, 2021, 9:20am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/2 "2021-05-10T09:20:08Z")

</div>

I guess `barmode` should be specified for the subplots layout.

```julia
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, 9:39am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/3 "2021-05-10T09:39:23Z")

</div>

Yes, that exactly did it! Thank you.  
How did you figured that out? I’m pretty new to plotlyjs, so I probably missed that in doc.

 ![image](https://global.discourse-cdn.com/julialang/original/3X/0/3/03527fd253f98008abdb91d9fad1e08a5d467d6d.png)

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [May 10, 2021, 11:00am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/4 "2021-05-10T11:00:08Z")

</div>

@stej  
`barmode` is an attribute of layout, not of the bar trace.  
In your definition:

```julia
trace1 = bar(; x = dates, y = [15, 1, 6], name = "Buy - euro", barmode="stack")

```

and similarly, trace2, trace3, trace4,  
`barmode="stack"`  
is ignored, because it isn’t recognized as an attribute for bar.  
That’s why the barmode must be set for the new plot, p. It doesn’t inherit the layout for p1 and p2.

---

<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, 11:40am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/5 "2021-05-10T11:40:28Z")

</div>

Yes, that’s right, my fault.  
I didn’t pay attention to that as I thought that I already specified layout for both `p1` and `p2`. So I didn’t try to specify layout mode for the parent. I didn’t event know how to do it (didn’t know about the `p.plot.layout["barmode"] = "stack"` setting).

So is it true, that the `p1` and `p2` loose their layout when they are used in a subplot? Or how does that work?

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [May 10, 2021, 6:05pm UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/6 "2021-05-10T18:05:52Z")

</div>

@stej  
To convince yourself, print after the definition of each plot the corresponding json serialization and inspect the layout attribute for each one:

```julia
p1 = plot(tracesBuy, layout)
print(json(p1, 2))

```

```julia
p2 = plot(tracesSell, layout)
print(json(p2, 2))

```

and

```julia
p= [p1; p2]
print(json(p, 2))

```

Then set `barmode=“stack” for the ayout of the plot p, and print again:

```julia
print(json(p, 2))

```

---

<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:** [November 3, 2021, 10:53am UTC](https://discourse.julialang.org/t/plotly-js-stacked-bars-in-subplots/60856/7 "2021-11-03T10:53:29Z")

</div>

This post was referenced from other one, so I looked once again.

My code:

```julia
using PlotlyJS, Dates

layout = Layout(;barmode="stack")
dates = [Date(2021, 05, 08), Date(2021, 05, 09), Date(2021, 05, 10)]
tracesBuy = [bar(; x = dates, y = [15, 1, 6], name = "Buy - euro", barmode="stack")
             bar(; x = dates, y = [2, 5, 4], name = "Buy - usd", barmode="stack")]
p1 = plot(tracesBuy, layout)
tracesSell = [bar(; x = dates, y = [-10, -5, -8], name = "Sell - euro", barmode="stack")
              bar(; x = dates, y = [-15, -6, -3], name = "Sell - usd", barmode="stack")]
p2 = plot(tracesSell, layout)

p = [p1, p2]
p.plot.layout["barmode"] = "stack"
p

```

It works in VS Code with Julia addon.  
When I select julia code and run “Send current line or selection to REPL”, it looks like this:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/4/e/4eb39b18cc3a8eb34dea90a760f96149370f8ad6.png)

If I just run julia from cmd.exe, and paste the same code, I get

 ![image](https://global.discourse-cdn.com/julialang/original/3X/5/7/577bde6b77f8886f5fbc7e24c1227e50c4a2fc19.png)

Not sure what’s going on here 😕