# Canvas: how to make stacked area chart?

**URL:** https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399
**Category:** Kibana
**Tags:** canvas
**Created:** [May 9, 2019, 3:38pm UTC](https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399 "2019-05-09T15:38:38Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Catherine\_Liu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/catherine_liu/32/34294_2.png) [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)
#### Post date: [May 9, 2019, 7:29pm UTC](https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399/2 "2019-05-09T19:29:24Z")

</div>

To make a stacked chart, you need to pass the `stack` parameter to the `seriesStyle` function used by the `defaultStyle` or `seriesStyle` parameters for plot. The `stack` parameter takes a `number` that serves as the id for the stack and stacks any series given that same id number. If you set `stack` in `defaultStyle`, this stack id will be applied to all of the series in your plot. If you set `stack` in `seriesStyles`, it'll stack any series given the same stack id number.

Here's an example of a line chart using `demodata`:

 ![34%20PM](https://us1.discourse-cdn.com/elastic/original/3X/d/3/d35ad870fbd454227d61c82f6e6eea73146803b6.png)

```auto
filters
| demodata
| mapColumn "time" expression={getCell "time" | formatdate format="MMM YYYY"}
| pointseries x="time" y="mean(price)" color="state"
| plot defaultStyle={seriesStyle lines=1 fill=1 stack=1} 
     palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
| render

```

Here's an example as a bar chart using the same data:

 ![43%20PM](https://us1.discourse-cdn.com/elastic/original/3X/8/a/8a58e86a37742b6c153345398b206f3c88994ac0.png)

```auto
filters
| demodata
| mapColumn "time" expression={getCell "time" | formatdate format="MMM YYYY"}
| pointseries x="time" y="mean(price)" color="state"
| plot defaultStyle={seriesStyle bars=0.5 fill=1 stack=1} 
    palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
| render

```

Here's an example with only the `done` and `running` series stacked:  
 ![44%20PM](https://us1.discourse-cdn.com/elastic/original/3X/9/7/97223070ffa75e61dee162c03a5e2bb7b6c1acb7.png)

```auto
filters
| demodata
| mapColumn "time" expression={getCell "time" | formatdate format="MMM YYYY"}
| pointseries x="time" y="mean(price)" color="state"
| plot defaultStyle={seriesStyle bars=0.5 fill=0.3} 
    seriesStyle={seriesStyle label="done" stack=1 fill=0.3} 
    seriesStyle={seriesStyle label="running" stack=1 fill=0.3}
    palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
| render

```

---

_[View the full topic](https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399)._