# Area

## **The Area Chart** <a href="#the-line-chart" id="the-line-chart"></a>

An area chart displays quantitative data graphically, with the area between the data line and the x-axis filled with color or pattern. This filled area represents volume or quantity, making it a useful tool for visualizing the magnitude or cumulative value of data over a continuous scale, such as time.

### The Method To Use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.area()`

It must contain the following parameters:

```python
x: str
order: int
data: Union[str, DataFrame, List[Dict]]
```

Accepts these parameters as optional:

```python
y: Optional[List[str]]
x_axis_name: Optional[str]
y_axis_name: Optional[str]
title: Optional[str]
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]
show_values: Optional[List[str]]
option_modifications: Optional[Dict]
variant: Optional[str]
```

## Examples <a href="#examples" id="examples"></a>

Suppose you have data points representing accumulated values over days. Here's how you can plot an area chart:

```python
data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 3},
    {'date': dt.date(2021, 1, 2), 'x': 5, 'y': 7},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 6},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
]

s.plt.area(data=data, order=0, x='date')
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fn166HjnVELZLCCEylJqn%2FArea.png?alt=media&#x26;token=db7f23b9-d3fa-42a5-9e37-95ac9e044a99" alt=""><figcaption></figcaption></figure>

## Variants

By setting the parameter `variant` to the following values the appearance of the chart can be changed:

{% tabs %}
{% tab title="Clean" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F65dXKZDHQvcPbo7OJHzt%2Fimatge.png?alt=media&#x26;token=0d0ab2fa-aed3-4462-9057-4e3b2b5dcecc" alt=""><figcaption><p>variant="clean"</p></figcaption></figure>
{% endtab %}

{% tab title="Minimal" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FkvJiX9DBy2whBecof3KS%2Fimatge.png?alt=media&#x26;token=026d8aa8-d3d7-41b4-b680-e159065fb102" alt=""><figcaption><p>variant="minimal"</p></figcaption></figure>
{% endtab %}
{% endtabs %}

##
