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

# Radar Chart

## Purpose

Radar Charts are used to compare two or more items or groups on various features or characteristics. They are used to plot one or more groups of values over multiple common variables. They do this by giving an axis for each variable, and these axes are arranged radially around a central point and spaced equally. The data from a single observation are plotted along each axis and connected to form a ***polygon***. Multiple observations can be placed in a single chart.

## Variations

![](/files/A2XrDfWwvE82RdvwF4q8)

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

* Basic Radar Chart
* Radar Chart with Multiple Series
* Radar Chart with Polygon fill 

## Working with Data

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

```markup
ClearCollect(
    ColBasicRadar,
    {
        name: "Population",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 50
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 100
            },
            {
                label: "Jun",
                value: 20
            }
        ], {Value: ThisRecord})
    }
);

```

The above code snippet will generate the following Radar chart.

![](/files/86Adg1kzE300xafkOZ6B)
{% 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 width="198">Control Property</th><th width="184.21130551816958">Description</th><th>Required</th><th width="167.47471928799735">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</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>X</td><td>Text</td></tr><tr><td>FillType</td><td>Property to choose fill type for radar chart.</td><td>X</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for radar</td><td>X</td><td>URL</td></tr></tbody></table>

## Examples

### Radar Chart with Multiple Series

![](/files/gchX0cs0DGJTzniuSJ6i)

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

```
ClearCollect(
    ColMultiSeriesRadar,
    {
        name: "India",
        color:"#ffd166",
        data: ForAll([
            {
                label: "Jan",
                value: 100
            },
            {
                label: "Feb",
                value: 80
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 95
            },
            {
                label: "Jun",
                value: 60
            }
        ], {Value: ThisRecord})
    }, 
    {
        name: "UK",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 70
            },
            {
                label: "Feb",
                value:50
            },
            {
                label: "Mar",
                value: 90
            },
            {
                label: "Apr",
                value: 50
            },
            {
                label: "May",
                value: 50
            },
            {
                label: "Jun",
                value: 90
            }
        ], {Value: ThisRecord})
    },
    {
        name: "US",
        color:"#ef476f",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 25
            },
            {
                label: "Mar",
                value: 70
            },
            {
                label: "Apr",
                value: 36
            },
            {
                label: "May",
                value: 35
            },
            {
                label: "Jun",
                value: 45
            }
        ], {Value: ThisRecord})
    }  
);
```

{% endtab %}

{% tab title="Property Configuration" %}

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

### Radar Chart with Polygon Fill&#x20;

![](/files/EnFkOW7sXQbeipVpquT9)

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

```
ClearCollect(
    ColPolygonFillRadar,
    {
        name: "Days",
        color:"#ef233c",
        data: ForAll([
            {
                label: "Sun",
                value: 20
            },
            {
                label: "Mon",
                value: 100
            },
            {
                label: "Tue",
                value: 40
            },
            {
                label: "Wed",
                value: 30
            },
            {
                label: "Thu",
                value: 50
            },
            {
                label: "Fri",
                value: 80
            },
            {
                label: "Sat",
                value: 33
            }
        ], {Value: ThisRecord})
    }
);
ClearCollect(
    ColPolarChart,
    {
        name: "Delivery",
        color:"#ef476f",
        data: 14
    },
    {
        name: "Finance",
        data: 23,
        color:"#ffd166"
    },
    {
        name: "HR",
        data: 21,
        color:"#06d6a0"
    },
    {
        name: "Planning",
        data: 17,
        color:"#118ab2"
    },
    {
        name: "Production",
        data: 10,
        color:"#073b4c"
    },
    {
        name: "Purchasing",
        data: 12,
        color:"#ef233c"
    },
    {
        name: "QA",
        data: 17,
        color:"#8338ec"
    },
    {
        name: "WareHouse",
        data: 19,
        color:"#540b0e"
    }
);
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] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.lowcodera.com/radar-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.