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

# Radial Chart

## Purpose

A Radial/Circular Bar Chart simply refers to a typical Bar Chart displayed on a polar coordinate system, instead of a cartesian system.It is used to show comparisons among categories by using a circular shape.

## Variations

![Radial Chart](/files/2gvsPsDriAKRGVtOoYJ6)

![](/files/AOPIPXnE7xe7KP8eRk4N)

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

* Basic Radial Chart
* Multiple Radial Bars
* Gradient Radial Chart
* Semi Circular Gauge

## Working with Data

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

```csharp
Table(
    {
        name: "Percentage",
        data: 70
    }
)
```

The above code snippet will generate the following radial chart.

![](/files/JCyqgOI8hqLn14j1aHpg)
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowDataLabel` property is set to **true**
* [x]  All other 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>StartAngle</td><td>Property to set a custom angle from which radial chart should start.</td><td>Numeric</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to set a custom angle from which radial chart should end.</td><td>Numeric</td><td>X</td></tr><tr><td>TotalLabel</td><td>Property to show total label in the center</td><td>String</td><td>X</td></tr><tr><td>TotalValue</td><td>Property to show any value of the total in the center.</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples

### Gradient Radial Chart

![](/files/s4hF33L1XXMdkhnhd4tr)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;`ShowDataLabel` property is set to **true**
* [x] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is to set **2**
* [x] `GradientOpcityFrom` property is to set **0.5**
* [x] `GradientOpcityTo` property is to set **0.5**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Multiple Radial Bars

![](/files/2q5llsblHBHV3iLRf1SB)

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

```
ClearCollect(
    MultipleRadial,
    {
        name: "Veg",
        data: 44
    },
    {
        name: "Fruite",
        data: 55
    },
    {
        name: "Beans",
        data: 67
    },
    {
        name: "Spices",
        data: 83
    }
);
```

{% endtab %}

{% tab title="Property Configuration" %}

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

### Semi Circular Gauge

![Semi Circular Gauge](/files/D0MTXb0sfNJ4pE6SJx2K)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* `ShowDataLabel` property is set to **true**
* `StartAngle` property is to set as **-90**&#x20;
* `EndAngle` property is to set as **90**
* &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}