# 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:** 4

<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 31, 2019, 11:38pm UTC](https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399/4 "2019-05-31T23:38:53Z")

</div>

That is possible but you would need to change the shape of your data. Here's an example of one (slightly hacky) way to achieve this in Canvas without changing your Elasticsearch index.

The `color` arg in [`pointseries`](https://www.elastic.co/guide/en/kibana/current/canvas-server-functions.html#_pointseries) splits a column into multiple series per unique value in a single column. There currently isn't a way to assign a series to a specific column in Canvas. So ideally, your data would be in a shape like this:

```auto
{ "timestamp": "2019-05-01 00:00:00", "count_type": "active", "count": 176 }
{ "timestamp": "2019-05-01 00:00:00", "count_type": "inactive", "count": 100 }

```

and you could set `pointseries color="count_type"`.

I used `csv` to mock your data, and here is what I ended up with:

![45%20PM](https://us1.discourse-cdn.com/elastic/original/3X/6/f/6f67df38bdb65ec0c7ce4eb3fbbe55d59aaaf1b4.png)

```auto
csv 
  "timestamp,count_active,count_inactive 
  2019-05-01 00:00:00, 176, 100
  2019-05-02 00:00:00, 96, 67
  2019-05-03 00:00:00, 126, 53"
| alterColumn count_active type="number"
| alterColumn count_inactive type="number"
| ply 
    by="timestamp" 
    expression={csv 
     data={string 
       "count_type,count
       " "active," {getCell "count_active"} "
       " "inactive," {getCell "count_inactive"} "
       " "total," {math "count_inactive + count_active"}
      } 
    }
| alterColumn "count" type="number"
| alterColumn "timestamp" type="date"
| pointseries x="timestamp" y="count" color="count_type"
| plot 
    defaultStyle={seriesStyle lines=1 fill=1} 
    palette={palette "#01A4A4" "#CC6666" "#D0D102" "#616161" "#00A1CB" "#32742C" "#F18D05" "#113F8C" "#61AE24" "#D70060" gradient=false}
| render

```

And a stacked version:

![39%20PM](https://us1.discourse-cdn.com/elastic/original/3X/7/0/7021427e748381cec7b31328d929dc3894924c6d.png)

```auto
csv 
  "timestamp,count_active,count_inactive 
  2019-05-01 00:00:00, 176, 100
  2019-05-02 00:00:00, 96, 67
  2019-05-03 00:00:00, 126, 53"
| alterColumn count_active type="number"
| alterColumn count_inactive type="number"
| ply 
    by="timestamp" 
    expression={csv 
     data={string 
       "count_type,count
       " "active," {getCell "count_active"} "
       " "inactive," {getCell "count_inactive"} "
       " "total," {math "count_inactive + count_active"}
      } 
    }
| alterColumn "count" type="number"
| alterColumn "timestamp" type="date"
| pointseries x="timestamp" y="count" color="count_type"
| plot 
    defaultStyle={seriesStyle lines=1 stack=1 fill=1} 
    palette={palette "#01A4A4" "#CC6666" "#D0D102" "#616161" "#00A1CB" "#32742C" "#F18D05" "#113F8C" "#61AE24" "#D70060" gradient=false}
| render

```

You should be able to replace the first 3 functions: `csv` and the two `alterColumns` with your datasource to achieve a similar chart.

The important (and hacky) piece is this:

```auto
ply 
    by="timestamp" 
    expression={csv 
     data={string 
       "count_type,count
       " "active," {getCell "count_active"} "
       " "inactive," {getCell "count_inactive"} "
       " "total," {math "count_inactive + count_active"}
      } 
    }

```

which uses [`ply`](https://www.elastic.co/guide/en/kibana/current/canvas-common-functions.html#_ply) to group your `datatable` by the timestamp and maps your `count_active` value to a row with `count_type:"active"` and `count: 176`, your `count_inactive` value to a 2nd row with `count_type:"inactive"` and `count: 100` for each unique `timestamp`, and the sum of `count_active` and `count_inactive` to a 3rd row with `count_type: total` and `count:276`.

---

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