# Stacked area plots in Makie

**URL:** https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574
**Category:** Visualization
**Created:** [August 24, 2024, 6:26pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574 "2024-08-24T18:26:54Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![mjmat](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mjmat](https://discourse.julialang.org/u/mjmat)
#### Post date: [August 24, 2024, 6:26pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/1 "2024-08-24T18:26:54Z")

</div>

This seems like a very simple question, but what is the easiest way to create a stacked area plot in Makie? I can’t seem to find that in the (very good) tutorials and documentation.

A short example in PlotlyJS:

```julia
using PlotlyJS
x = collect(0:10)
y1 = x
y2 = ones(size(x))
t1 = scatter(x=x, y=y1, stackgroup="one")
t2 = scatter(x=x, y=y2, stackgroup="one")
plot([t1, t2])

```

I understand I can get to the same result by using `band` in Makie and stacking the values myself, but I am probably missing an easier way to achieve that.

---

<div class="post-metadata">

### Author: ![p\_f](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@p\_f](https://discourse.julialang.org/u/p_f)
#### Post date: [August 24, 2024, 9:50pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/3 "2024-08-24T21:50:24Z")

</div>

Sorry, thought you meant something else earlier haha.

do you mean this sort of thing? no idea the best way to do it, chatgpt spit this out…which is not really any better than just using band like you said

 ![image](https://global.discourse-cdn.com/julialang/original/3X/8/7/8718d133ee96314845b5768caf8b4d865ba00816.png)

```julia
# Sample data
x = 1:12 # Represents months
y1 = [10, 12, 15, 20, 18, 25, 30, 28, 35, 40, 38, 42] # Category 1
y2 = [5, 8, 10, 12, 14, 15, 18, 20, 23, 25, 28, 30] # Category 2
y3 = [3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25] # Category 3

# Stack the data
y_stack = [y1 y2 y3]
y_cumulative = cumsum(y_stack, dims=2)

# Plotting
fig = Figure()
ax = Axis(fig[1, 1], title="Stacked Area Plot")

for i in 1:size(y_stack, 2)
    if i == 1
        fill_between!(ax, x, 0, y_cumulative[:, i], label="y$i")
    else
        fill_between!(ax, x, y_cumulative[:, i-1], y_cumulative[:, i], label="y$i")
    end
end

fig

```

---

<div class="post-metadata">

### Author: ![mjmat](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mjmat](https://discourse.julialang.org/u/mjmat)
#### Post date: [August 24, 2024, 10:56pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/4 "2024-08-24T22:56:12Z")

</div>

Thanks, I think it’s a bit better than `band`, but far from convenient.  
It seems strange to me, in other plotting packages it’s usually easy to get a stacked area plot.

---

<div class="post-metadata">

### Author: ![mjmat](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mjmat](https://discourse.julialang.org/u/mjmat)
#### Post date: [August 25, 2024, 3:08am UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/5 "2024-08-25T03:08:52Z")

</div>

Just as an add-on, I was surprised that ChatGPT would be able to find a solution which, while not being perfect, seems to be a good workaround. So I tried myself (not familiar with the tool, just went to the website and wrote “write julia code to draw a stacked area chart in makie”.  
This is what it gave (reformatted for the forum)

```julia
using Pkg
Pkg.add("Makie")
using Makie
# Sample data
x = 1:10
y1 = [2, 3, 4, 5, 4, 3, 2, 3, 4, 5]
y2 = [1, 2, 1, 2, 3, 4, 3, 2, 1, 2]
y3 = [3, 2, 4, 3, 2, 3, 4, 5, 4, 3]
# Create a figure
fig = Figure()
# Create an axis
ax = Axis(fig[1, 1])
# Plot the stacked area chart
stacked_area!(ax, x, [y1, y2, y3], stack=true)
# Set labels and title
ax.xlabel = "X-axis"
ax.ylabel = "Y-axis"
ax.title = "Stacked Area Chart"
# Show the figure
display(fig)

```

I like the `stacked_area!` function, except it doesn’t seem to exist in CairoMakie nor GLMakie…  
Oh well, I am almost glad ChatGPT didn’t know the answer…

---

<div class="post-metadata">

### Author: ![p\_f](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@p\_f](https://discourse.julialang.org/u/p_f)
#### Post date: [August 25, 2024, 12:22pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/6 "2024-08-25T12:22:40Z")

</div>

I think my chatgpt got lucky with `fill_between!` because it’s a matplotlib function haha. It’s probably better to use `band` since `fill_between!` doesn’t actually appear in the docs anywhere

```julia
function stacked_area_plot!(ax, x, ys)
    y_stack = reduce(hcat, ys)
    y_cumulative = cumsum(y_stack, dims=2)

    for i in 1:size(y_stack, 2)
        if i == 1
            band!(ax, x, zeros(length(x)), y_cumulative[:, i], label="Category $i")
        else
            band!(ax, x, y_cumulative[:, i-1], y_cumulative[:, i], label="Category $i")
        end
    end
    
    nothing
end
 
f = Figure()
ax = Axis(f[1, 1])

x = 1:12  
y1 = [10, 12, 15, 20, 18, 25, 30, 28, 35, 40, 38, 42] 
y2 = [5, 8, 10, 12, 14, 15, 18, 20, 23, 25, 28, 30]   
y3 = [3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25] 

ys = [y1, y2, y3]

stacked_area_plot!(ax, x, ys)
f

```

---

<div class="post-metadata">

### Author: ![mjmat](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mjmat](https://discourse.julialang.org/u/mjmat)
#### Post date: [August 25, 2024, 3:29pm UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/7 "2024-08-25T15:29:01Z")

</div>

Yes that’s a good point. I said in my original post that I liked the Makie documentation, but I was a bit frustrated to find nothing on `fill_between!`.  
I will mark your most recent answer as the solution, thanks!

---

<div class="post-metadata">

### Author: ![asinghvi17](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/asinghvi17/32/8272_2.png) [@asinghvi17](https://discourse.julialang.org/u/asinghvi17)
#### Post date: [August 26, 2024, 5:29am UTC](https://discourse.julialang.org/t/stacked-area-plots-in-makie/118574/8 "2024-08-26T05:29:58Z")

</div>

We should probably create a `stackedarea` recipe for this…it shouldn’t be too hard though!
