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

# Area

> Add an area series to a [combo_chart](/components/combo_chart)

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" /%}
{% /combo_chart %}
```

## Examples

### Basic Area Series

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" /%}
{% /combo_chart %}
```

### Unstacked Areas

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" series="category" stacked=false /%}
{% /combo_chart %}
```

### Area with Gradient Fill

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" stacked=false options={
        gradient=true
    } /%}
{% /combo_chart %}
```

## Attributes

<ResponseField name="y" type="string" required>
  Column name for y-axis
</ResponseField>

<ResponseField name="series" type="string">
  Column name for series grouping
</ResponseField>

<ResponseField name="axis" type="string" default="y1">
  The axis to render the series on

  **Allowed values:**

  * `y1`
  * `y2`
</ResponseField>

<ResponseField name="fmt" type="string">
  Format for this series' values. See [Value Formatting](/core-concepts/value-formatting) for available formats.
</ResponseField>

<ResponseField name="tooltip_fields" type="array">
  Extra columns to include in the tooltip on hover. Each entry is `{ value, label?, fmt?, color_by_sign?, down_is_good? }`. See the [tooltip fields guide](/components/tooltip-fields) for examples.
</ResponseField>

<ResponseField name="data_labels" type="options group">
  Label each point in the series with its value

  **Example:**

  ```
  data_labels={
    position = "above"
    fmt = "date"
    size = 0
    distance = 0
    rotate = 0
    color = "string"
    border_color = "string"
    show_overlap = true
  }
  ```

  **Attributes:**

  * position: `string` - Position the label relative to its data point
    * **Allowed values:**
      * `above`
      * `below`
      * `left`
      * `right`
      * `middle`
  * fmt: `string` - Format the label value. Defaults to series or axis fmt.
    * **Allowed values:** See [Value Formatting](/core-concepts/value-formatting) for all available formats.
  * size: `number` - Font size in px
  * distance: `number` - How far the label is from the data point
  * rotate: `number` - Rotate each label (degrees)
  * color: `string` - Change the text color of the labels
  * border\_color: `string` - Change the border color surrounding text labels, defaults to chart background
  * show\_overlap: `boolean` - Show labels for every point even when they overlap
</ResponseField>

<ResponseField name="options" type="options group">
  **Example:**

  ```
  options={
    step = "start"
    smooth = true
    gradient = true
  }
  ```

  **Attributes:**

  * step: `string` - Show a stepped line rather than a smooth line between points and control where the step happens (start, middle, or end)
    * **Allowed values:**
      * `start`
      * `middle`
      * `end`
  * smooth: `boolean`
  * gradient: `boolean` - Apply a color-to-transparent gradient fill to the area, fading from the series color at the top to transparent at the bottom
</ResponseField>

<ResponseField name="echarts_options" type="map">
  Raw [ECharts series options](https://echarts.apache.org/en/option.html#series) deep-merged into this series only. For overrides that apply to every series on the chart, set `echarts_series_options` on the parent chart instead.

  **Example:**

  ```
  echarts_options={
      endLabel={ show=true }
      markPoint={ data=[{ type="max" } { type="min" }] }
  }
  ```
</ResponseField>

<ResponseField name="stacked" type="boolean | string" default="true">
  Whether to stack areas with the same series value. Set to "100%" for percentage stacking.
</ResponseField>

<ResponseField name="stack_id" type="string">
  Stack identifier - areas with the same stack\_id value will be stacked together. Overrides the stacked prop.
</ResponseField>

## Allowed Parents

* [combo\_chart](/components/combo_chart)