> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Area chart

> Area charts use filled colors and stacking to show value changes and composition over time — choose basic, stacked, or 100% stacked type to compare category contributions in sales trends or resource allocation.

An area chart visualizes value changes and composition over time and across dimensions — filled colors and stacking. Great for sales trends or resource allocation. Quickly identify shifts and compare contributions across categories.

## Add an area chart

In the upper-left, click **Add chart**. Pick **Area chart**.

![](https://img.alicdn.com/imgextra/i3/O1CN01SBetmM1p62FmAialX_!!6000000005310-0-tps-389-393.jpg)

## Configure the area chart

Configure type/data and custom style:

**Data**: pick source — table and data range. **All data** enables filters.

![](https://img.alicdn.com/imgextra/i4/O1CN01z19I1A1YVp5O0HV6x_!!6000000003065-0-tps-300-305.jpg)

**Chart**: switch type — basic, stacked, or 100% stacked area chart; pick a color theme.

![](https://img.alicdn.com/imgextra/i1/O1CN01o57QDe2AENOk9LL3A_!!6000000008171-0-tps-291-204.jpg)

**X-axis**: pick the field, sort basis (by X value, Y value, or record order), and sort order (ascending/descending).

![](https://img.alicdn.com/imgextra/i4/O1CN01t4i6fu1t29MAoKpaz_!!6000000005843-0-tps-296-271.jpg)

**Y-axis**: aggregation (count of records or aggregated field value), Y content, and group aggregation. With "count of records", only set group aggregation (none, or by field). With "aggregated field value": no grouping → multiple Y fields with their own aggregations (count, sum, average, max, etc.) — remove/move up/move down. Grouping → one Y field with one aggregation. Note: with grouping, X can't sort by Y value.

![](https://img.alicdn.com/imgextra/i2/O1CN01E6Y8Fi1wPukqjEMfH_!!6000000006301-0-tps-297-338.jpg)

**Note**: sum, max, min, and average only apply to numeric fields.

**Custom style**: background color, legend position, value display, gridlines, axis labels, overlap settings, line type, axis visibility, axis baseline visibility, axis-label visibility, X-label angle — all configurable.

![](https://img.alicdn.com/imgextra/i4/O1CN01HnkrUK27MfixtXDs0_!!6000000007783-0-tps-307-587.jpg)

## Manage the area chart

Hover over the chart — find the icon in the upper-right. Click for: configure, rename, copy, add to dashboard center, copy as image, export as image, delete.

![](https://img.alicdn.com/imgextra/i3/O1CN018tP8901IIy7NA3DoV_!!6000000000871-0-tps-504-325.jpg)

Drag the lower-right corner to resize. Drag the top to reposition.