# Polar Chart

## Purpose

Polar charts are circular charts that use values and angles to show information as polar coordinates. Polar charts are useful for showing scientific data.

## Variations

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkp34t2jLJnAat8eJg4%2F-MkpadtZInuqPQvFWATE%2Fimage.png?alt=media\&token=e353a3b3-79ad-48c0-bb95-248c419a53aa)

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

* Basic Polar Chart
* Polar Chart with Gradient
* Polar Chart with Monochrome Fill

## Working with Data

‌The data format for the Polar 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 `colPolarChart`is defined in the Power App. The **`items`** property of the polar chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Delivery",
        data: 14
    },
    {
        name: "Finance",
        data: 23
    },
    {
        name: "HR",
        data: 21
    },
    {
        name: "Planning",
        data: 17
    },
    {
        name: "Production",
        data: 10
    },
    {
        name: "Purchasing",
        data: 12
    },
    {
        name: "QA",
        data: 17
    },
    {
        name: "WareHouse",
        data: 19
    }
)

```

The above code snippet will generate the following Polar chart.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkpcyLA0w7nWAyq_nEr%2F-Mkpd1NT_mohfkE0Ohpk%2Fimage.png?alt=media\&token=e420172a-ca18-4eae-bd73-2177d4591703)
{% 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-MlTRgCsbWJS8C9wWRkk%2F-MlTWJluKy9V58Nhs2N2%2Fimage.png?alt=media\&token=c71a720d-521c-42da-a472-b9996a730bee)

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

```
Clear(ColPolarChart);
ForAll(
    Employees,
    Collect(
        ColPolarChart,
        {
            name: ThisRecord.Department,
            data: ThisRecord.Value
        }
    )
)
```

{% 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 polar 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 polar</td><td>URL</td><td>X</td></tr><tr><td>StartAngle</td><td>Property to Set the starting Angle of the <strong>Polar</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>Polar</strong> Chart in degrees.Numeric (ranges 0 to 360)</td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr></tbody></table>

## Examples

### Polar Chart with Gradient

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkpcyLA0w7nWAyq_nEr%2F-Mkpd7yQ6F-VahyGXCCR%2Fimage.png?alt=media\&token=02822914-8d20-44b3-8a54-14c523767a4c)

{% 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).
{% endtab %}

{% tab title="Property Configuration" %}

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

### Gradient Chart with Monochrome Fill

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkpcyLA0w7nWAyq_nEr%2F-MkpdE5JYlmmuesj3xZj%2Fimage.png?alt=media\&token=232ad5f8-adae-4b88-9059-ef55313b61e3)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColPolarChartMono,
    {
        name: "Delivery",
        data: 5,
        color: "#4c782f"
    },
    {
        name: "Finance",
        data: 12,
        color: "#598a37"
    },
    {
        name: "HR",
        data: 15,
        color: "#62993e"
    },
    {
        name: "Planning",
        data: 12,
        color: "#6ca744"
    },
    {
        name: "Production",
        data: 10,
        color: "#81b464"
    },
    {
        name: "Purchasing",
        data: 10,
        color: "#a1c490"
    },
    {
        name: "QA",
        data: 17,
        color: "#b8d1ad"
    },
    {
        name: "WareHouse",
        data: 19,
        color: "#cedec7"
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}