# Area Chart

## Purpose

With their mountain-like appearance, Area Charts are used to represent quantitative variations.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FvNzReuUD0gtAvo0AUodx%2Fimage.png?alt=media\&token=372281ab-a3e8-4f56-a6bc-5446f935862b)

## Variations <a href="#chart-variations" id="chart-variations"></a>

‌There are several variations of Area charts which are supported through the configuration of data and component properties.

* Basic Area Chart&#x20;
* Spline Area Chart&#x20;
* Stepline Area Chart&#x20;
* Area chart with Dashline

## Working with Data

‌The data format for the Area chart is the same as for other bar charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called *ColAreaChart* is defined in the Power App. The **`items`** property of the bar chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Actual",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Budgeted",
        data:ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ],{Value:ThisRecord})
    }
)
```

The above code snippet will generate the following bar chart.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkf9FYPIP2O1MMAII_c%2F-MkfMplBUEqVanKy2Y_I%2Fimage.png?alt=media\&token=f4f7b555-7f3a-42c1-bdfc-0c7ac51bfc72)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MlKKnHccEHNhRzGdklU%2F-MlKMKdWBnSBmzEjZ7So%2Fimage.png?alt=media\&token=4c99c71e-6d5c-4bcc-be6b-ffa45cc856c3)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    ColAreaChart,
    {
        name: "Actual",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Actual
                }
            }
        )
    },
    {
        name: "Budgeted",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Budget
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](https://docs.lowcodera.com/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="183">Accepted Values</th><th width="151">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Basic Area Chart

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkf9FYPIP2O1MMAII_c%2F-MkfMuMuZbvLQM1X2kLz%2Fimage.png?alt=media\&token=d6cbc4db-361d-4e83-b3b8-9431e3702bde)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Spline Area Chart

![Spline Chart](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkf9FYPIP2O1MMAII_c%2F-MkfN1jKx9TWt_rp0Nj0%2Fimage.png?alt=media\&token=b07b5952-a228-44a7-8f81-b40264d6d14c)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Stepline Area Chart

![Stepline Area Chart](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkf9FYPIP2O1MMAII_c%2F-MkfN9xovLrqp6rE9rFc%2Fimage.png?alt=media\&token=1d43ab08-0830-4911-8b64-c5d55dae70ad)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

```csharp
ClearCollect(
    ColStackedColumnChart,
    {
        name: "Marine Sprite",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Striking Calf",
        data: ForAll([
            {
                label: 2001,
                value: 53
            },
            {
                label: 2002,
                value: 52
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 15
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 40
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Tank Picture",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 37
            },
            {
                label: 2003,
                value: 75
            },
            {
                label: 2004,
                value: 48
            },
            {
                label: 2005,
                value: 65
            },
            {
                label: 2006,
                value: 29
            },
            {
                label: 2007,
                value: 4
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Bucket Slope",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 12
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 25
            },
            {
                label: 2006,
                value: 24
            },
            {
                label: 2007,
                value: 10
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Reborn Kid",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 32
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 14
            },
            {
                label: 2006,
                value: 10
            },
            {
                label: 2007,
                value: 7
            }
        ],{Value:ThisRecord})
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Stepline**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Area Chart with Dashline

![Area Chart with Dashline](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkf9FYPIP2O1MMAII_c%2F-MkfNHc8SxviqI7X5OS0%2Fimage.png?alt=media\&token=dc85244e-6a22-45bc-a599-1634e2816f5c)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection.&#x20;

```csharp
ClearCollect(
    ColAreaChartDashline,
    {
        name: "Population",
        dashlength: 7, // Resposible for Dashline
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Education",
        dashlength: 9,
        data: ForAll([
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value:ThisRecord})
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}