# Stacked bar graphs

**URL:** <https://discourse.julialang.org/t/stacked-bar-graphs/18550>\
**Category:** Visualization\
**Tags:** statsplots, vegalite\
**Created:** [December 11, 2018, 9:08am UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550 "2018-12-11T09:08:29Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![svpillai](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@svpillai](https://discourse.julialang.org/u/svpillai)\
**Post date:** [January 30, 2019, 4:37pm UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550/23 "2019-01-30T16:37:52Z")

</div>

@davidanthoff from your previous code that worked perfectly:

```julia
df |>
  @vlplot(:bar,
    x=:Sex,
    y=:Freq,
    color=:Eye,
    column={:haircut_woman, sort=["Red", "Blond", "Brown", "Black"]}
  )

```

I’m trying exactly as above to sort for color as well. If I run:

```julia
df |>
  @vlplot(:bar,
    x=:Sex,
    y=:Freq,
    color={:Eye, sort=["Green", "Blue", "Hazel", "Brown"]},
    column={:haircut_woman, sort=["Red", "Blond", "Brown", "Black"]}
  )

```

I end up getting that the legend shows the new ordering that I specified, however the actual ordering of the stack remains the same (and colors change now for some other reason). If I try putting this in the `y={:Freq, sort=["Green", "Blue", "Hazel", "Brown"] }`, it doesn’t change anything either, and if I specify it _only_ in the **y** without specifying it in the **color** , it goes back to the original sorting of “Blue, Brown, Green, Hazel” that it (alphabetically?) specified initially on its own. If I specify `sort=true` with the **color** , it ignores my specified sorting and sorts by the dataframe specification which is unhelpful since I draw from various files to organise the data frame and this isn’t the ordering I’d want.

How do I sort this with color?

---

<div class="post-metadata">

**Author:** ![Mattriks](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mattriks/32/351_2.png) [@Mattriks](https://discourse.julialang.org/u/Mattriks)\
**Post date:** [January 30, 2019, 7:22pm UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550/24 "2019-01-30T19:22:46Z")

</div>

Try Gadfly: [Tutorial · Gadfly.jl](http://gadflyjl.org/dev/tutorial/#Discrete-Scales-1)  
Also a new feature has been added: [`Stat.dodge`](http://gadflyjl.org/dev/gallery/statistics/#%5BStat.dodge%5D(@ref)-1), allowing the stacking and dodging of [labels](http://gadflyjl.org/dev/gallery/statistics/#%5BStat.dodge%5D(@ref)-1) and [errorbars](http://gadflyjl.org/dev/gallery/geometries/#%5BGeom.errorbar%5D(@ref)-1) (scroll down).

---

<div class="post-metadata">

**Author:** ![davidanthoff](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/davidanthoff/32/223493_2.png) [@davidanthoff](https://discourse.julialang.org/u/davidanthoff)\
**Post date:** [January 31, 2019, 5:58pm UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550/25 "2019-01-31T17:58:50Z")

</div>

It is a bit complicated 😉 I think they are aware that this should be made easier, see [here](https://github.com/vega/vega-lite/issues/1734). The workaround here is essentially adapted from the last example [here](https://vega.github.io/vega-lite/docs/stack.html#order).

```julia
df |> 
  @vlplot(:bar,
    transform=[{
      calculate="if(datum.Eye==='Green', 0, if(datum.Eye==='Blue', 1, if(datum.Eye==='Hazel',2,3)))",
      as=:siteOrder}], 
    x=:Sex,
    y=:Freq,
    color=:Eye,
    column={:Hair, sort=["Red", "Blond", "Brown", "Black"]},
    order="siteOrder:q"
)

```

So the strategy here is to add a new computed field called `siteOrder`, and then use that to order the stacked bars. You could also add the `sort` keyword back to the `color` channel to sort the elements in the legend again.

Oh, and one more thing: you could of course add this additional column outside of the `@vlplot` macro, using normal `DataFrame` operations or [Query.jl](https://github.com/queryverse/Query.jl) or something like that.

---

<div class="post-metadata">

**Author:** ![Mastomaki](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mastomaki](https://discourse.julialang.org/u/Mastomaki)\
**Post date:** [February 14, 2022, 9:01am UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550/27 "2022-02-14T09:01:33Z")

</div>

And if you want the actual colors to be equal to hair colors you would change the color parameter:

```
color = {field = :Eye, type = "nominal",
            scale = {domain = ["Green", "Blue", "Hazel", "Brown"], range = ["#F1C40F", "#95A5A6", "#F1C40F", "#F1C40F"] } }

```

Changing the hex values to the proper colors.

However, it seems that the order of bars in the graph and legend entries is not the same. I wonder how one can fix this? More precisely, the vertical order of bars in the graph is alphabetical where as legend entries are in the order specified in “domain”.

---

<div class="post-metadata">

**Author:** ![Mastomaki](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mastomaki](https://discourse.julialang.org/u/Mastomaki)\
**Post date:** [February 14, 2022, 11:29am UTC](https://discourse.julialang.org/t/stacked-bar-graphs/18550/28 "2022-02-14T11:29:49Z")

</div>

I notice that there is a small problem: all the legend entries mentioned in “domain” are shown even if the data is not present.

[Previous page](https://discourse.julialang.org/t/stacked-bar-graphs/18550.md?page=1)