> For the complete documentation index, see [llms.txt](https://docs.chartsql.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chartsql.com/charts/area.md).

# Area

<table data-card-size="large" data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th data-hidden></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/pages/N6Jr8TfhmU6pCqG1xGgL#area-chart-with-100-stacking">/pages/N6Jr8TfhmU6pCqG1xGgL#area-chart-with-100-stacking</a></td><td></td><td></td><td></td><td><a href="/files/01OUSfXiKmOIQphqIwpT">/files/01OUSfXiKmOIQphqIwpT</a></td></tr></tbody></table>

## Area Chart with 100% Stacking

```sql
-- @chart: area
-- @title: Stacking-mode - 100% normalizing a stacked chart
-- @groups: Month, Channel
-- @subtitle: An example area chart that is 100% stacked
-- @formats: currency
-- @series: Sales
-- @stacks: Channel
-- @stacking-mode: percent
SELECT 
	TRUNC(date_closed, 'MONTH') as Month,
    Channel,
	sum(amount) as Sales
FROM sales
GROUP BY Month, Channel
ORDER BY Month ASC;
```

<figure><img src="/files/01OUSfXiKmOIQphqIwpT" alt=""><figcaption></figcaption></figure>

| MONTH                            | CHANNEL  | SALES     |
| -------------------------------- | -------- | --------- |
| January, 01 2017 00:00:00 +0000  | coldcall | 174647.0  |
| January, 01 2017 00:00:00 +0000  | referral | 1310064.0 |
| January, 01 2017 00:00:00 +0000  | search   | 681444.0  |
| January, 01 2017 00:00:00 +0000  | event    | 502700.0  |
| February, 01 2017 00:00:00 +0000 | pr\_ad   | 509564.0  |
| February, 01 2017 00:00:00 +0000 | search   | 1109141.0 |
| February, 01 2017 00:00:00 +0000 | event    | 417651.0  |