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.

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.

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

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

FillType

Property to choose fill type for polar chart.

Gradient

Image

Solid

BackgroundImage

Property to provide background image URL for polar

URL

StartAngle

Property to Set the starting Angle of the Polar Chart in degrees.

Numeric (ranges 0 to 360)

EndAngle

Property to Set the ending Angle of the Polar Chart in degrees.Numeric (ranges 0 to 360)

Numeric (ranges 0 to 360)

Examples

Polar Chart with Gradient

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

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

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

PreviousPie Chart NextRadar Chart

Last updated 1 year ago

Was this helpful?