> 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/donut-chart.md).

# 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

![](/files/4KJ5Mnr5rw5GnWvEan7V)

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.

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

![](/files/-MlKjYsnrI0i0oUTA2gt)

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

![](/files/-MkgIaPaGwHy73utFFVE)

{% 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](/donut-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 %}

### Donut Pie Chart&#x20;

![](/files/-MkgIe2865rjk1N-xeOm)

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