# 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](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FKJN5ejpDmSiSh4FacpLW%2Fimage.png?alt=media\&token=bd5a212f-99a6-435e-ba61-62f7763e0cc7)

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FutsxYpqw1IdrrSaZ4Yef%2Fimage.png?alt=media\&token=ac51e657-048b-4799-819a-adada0715eb8)

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.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FPsSxpXB5iP5HCWzKd60g%2Fimage.png?alt=media\&token=d6a36409-75a3-405a-b188-d6309310b114)
{% 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**](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>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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FkeqfMLf0VdMckciC9IzU%2Fimage.png?alt=media\&token=c3eb46db-09b5-4dd7-94d1-fe0f1783a52b)

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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F1JFvDMh3DazPvzOdNeVH%2Fimage.png?alt=media\&token=8522c70e-c687-4c8c-ac1b-fac5bb45aecb)

{% 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](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F7PP90GGm7NLPWVxyHNoW%2Fimage.png?alt=media\&token=85f5e427-8d6f-4dcd-bd87-aa48fc30898d)

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