> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/pie-chart.md).

# 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

![](/files/-MkgDMzD7FFJ36G0lJge)

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.

![](/files/-Mkg9uwL_HekXPb9A-k2)
{% 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:

![](/files/-MlKjYsnrI0i0oUTA2gt)

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**](/component-properties/chart-components.md) 
{% 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](/files/-MkgBr0hkKH7VoFK6Mci)

{% 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](/pie-chart.md#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;

![](/files/-MkgDiNdz5siTqwweffL)

{% 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](/pie-chart.md#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 %}