Radial Chart

lowcodera Radial Chart Component

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

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.

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.

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

The above code snippet will generate the following radial chart.

Property Configuration

• ShowDataLabel property is set to true

• All other 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
StartAngle	Property to set a custom angle from which radial chart should start.	Numeric	X
EndAngle	Property to set a custom angle from which radial chart should end.	Numeric	X
TotalLabel	Property to show total label in the center	String	X
TotalValue	Property to show any value of the total in the center.	Numeric	X

Examples

Gradient Radial Chart

Data Configuration

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

Property Configuration

• ShowDataLabel property is set to true

• FillType property is set to Gradient

• GradientShadeIntensity property is to set 2

• GradientOpcityFrom property is to set 0.5

• GradientOpcityTo property is to set 0.5

• All other control properties can be left as default

Multiple Radial Bars

Data Configuration

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

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

Property Configuration

• ShowTotal property is set to Datetime

• All other control properties can be left as default

Semi Circular Gauge

Semi Circular Gauge

Data Configuration

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

Property Configuration

• ShowDataLabel property is set to true

• StartAngle property is to set as -90

• EndAngle property is to set as 90

• All other control properties can be left as default