# Donut Chart

## Purpose

Donut charts are used **to show the proportions of categorical data**, with the size of each piece representing the proportion of each category. 

## Variations

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FU5XaqGe4SUFFVjMWwlNJ%2FScreenshot_2.png?alt=media\&token=fa0547ef-dea3-4f75-902e-f7febcabdda9)

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

* Basic Donut Chart
* Donut Chart with Image
* Gradient Donut Chart

## Working with Data

‌The data format for the Donut 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 table with static data called `ColDonutChart` is defined in the Power App. The **`items`** property of the donut 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 Donut chart.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkgFn0hIpknTkeC8b89%2F-MkgI0cvZ6-vWaKFGhFo%2Fimage.png?alt=media\&token=65b7e06e-c27c-4c74-b766-5d01f6b51279)
{% 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-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
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 behaviors.

<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 append words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for donut 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 donut</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

### Donut Chart with Image

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkgFn0hIpknTkeC8b89%2F-MkgIaPaGwHy73utFFVE%2Fimage.png?alt=media\&token=08c95aff-96a6-4cae-b9e4-62cf461501c3)

{% 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 %}

### Donut Pie Chart&#x20;

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkgFn0hIpknTkeC8b89%2F-MkgIe2865rjk1N-xeOm%2Fimage.png?alt=media\&token=8e124a36-6ff6-43b3-bedb-516af0b47827)

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