# Pie Chart

## Purpose

Pie charts are best to use when you are trying to compare parts of a whole. They do not show changes over time.

## Variations

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkgCAtXr956P_oA4jXU%2F-MkgDMzD7FFJ36G0lJge%2Fimage.png?alt=media\&token=3f983f3c-c805-4179-ae49-ad25d227ee4e)

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

* Basic Pie Chart
* Pie Chart with Image
* Gradient Pie Chart

## Working with Data

‌The data format for the Pie chart is the same as for other Lowcodera 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.  

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

```csharp
Table(
    {
        name: "Delivery",
        data: 5
    },
    {
        name: "Finance",
        data: 12
    },
    {
        name: "HR",
        data: 19
    },
    {
        name: "Planning",
        data: 25
    }
)
```

The above code snippet will generate the following Pie chart.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkg0yklDgISqeu8yFYe%2F-Mkg9uwL_HekXPb9A-k2%2Fimage.png?alt=media\&token=03acf37e-facd-4c2a-b217-edbb6d297d54)
{% endtab %}

{% tab title="Static 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-MlKR1U6mek6YAODJnjI%2F-MlKjYsnrI0i0oUTA2gt%2Fimage.png?alt=media\&token=ebca1d7f-9675-4d41-99dd-6fe9154f438e)

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

```csharp
Table(
    ForAll(
        Projects,
        {
            name: ThisRecord.Category,
            data: Value(ThisRecord.Rate)
        }
    )
)
```

{% 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) 
{% 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>Accepted Values</th><th width="150">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>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>FillType</td><td>Property to choose fill type for pie chart.</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 pie chart</td><td>URL</td><td>X</td></tr><tr><td>StartAngle</td><td>Property to Set the starting Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.<br></td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to Set the ending Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.Numeric (ranges 0 to 360)</td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr></tbody></table>

## Examples

### Pie Chart with Image

![Pie Chart with Images](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkg0yklDgISqeu8yFYe%2F-MkgBr0hkKH7VoFK6Mci%2Fimage.png?alt=media\&token=ab00fe52-cb14-4429-a4ae-3e73b256ad44)

{% 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] `FillType` property is set to **Image**
* [x] `BackgroundImage` property is set to **URL** (e.g. <https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260>)
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Gradient Pie Chart&#x20;

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkgCAtXr956P_oA4jXU%2F-MkgDiNdz5siTqwweffL%2Fimage.png?alt=media\&token=65d93ce1-4ef1-44ff-ba34-7f4097ac9d38)

{% 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] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is set to **5**
* [x] `GradientOpcityFrom` property is set to **5**
* [x] `GradientOpcityTo` property is set to **5**
* [x] `GradientInverse` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}