Polar Chart

lowcodera Polar chart component

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

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.

Static Collection example

In this example, a collection with static data called colPolarChartis defined in the Power App. The items property of the polar chart component is then bound to this collection.

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.

Dynamic Collection Example

The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

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
        }
    )
)

Property Configuration

All control properties can be left as default

Chart Properties

For a full listing of all chart properties see the chart components property reference

The properties below are the main ones which change this components appearance and behaviours.

Property	Description	Accepted Values	Required
DataLabelSymbol	Property to add any symbol (eg. currency or any appened words) along with data labels	Text	X
FillType	Property to choose fill type for polar chart.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for polar	URL	X
StartAngle	Property to Set the starting Angle of the Polar Chart in degrees.	Numeric (ranges 0 to 360)	X
EndAngle	Property to Set the ending Angle of the Polar Chart in degrees.Numeric (ranges 0 to 360)	Numeric (ranges 0 to 360)	X

Examples

Polar Chart with Gradient

Data Configuration

A single or multiple data series is defined in the collection. You can use the same collection used in section.

Property Configuration

• FillType property is set to Gradient

• GradientShadeproperty is set to Dark

• All other control properties can be left as default

Gradient Chart with Monochrome Fill

Data Configuration

A single or multiple data series is defined in the collection.

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"
    }
);

Property Configuration

• All other control properties can be left as default