Pie Chart

lowcodera Pie Chart Component

Purpose

Pie charts are best to use when you are trying to compare parts of a whole. They do not show changes over time.

Variations

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

• Basic Pie Chart

• Pie Chart with Image

• Gradient Pie Chart

Working with Data

‌The data format for the Pie 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 ColPieChart is defined in the Power App. The items property of the pie chart component is then bound to this collection.

Table(
    {
        name: "Delivery",
        data: 5
    },
    {
        name: "Finance",
        data: 12
    },
    {
        name: "HR",
        data: 19
    },
    {
        name: "Planning",
        data: 25
    }
)

The above code snippet will generate the following Pie chart.

Static 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.

Table(
    ForAll(
        Projects,
        {
            name: ThisRecord.Category,
            data: Value(ThisRecord.Rate)
        }
    )
)

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 pie chart.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for pie chart	URL	X
StartAngle	Property to Set the starting Angle of the Pie or Doughnut Chart in degrees.	Numeric (ranges 0 to 360)	X
EndAngle	Property to Set the ending Angle of the Pie or Doughnut Chart in degrees.Numeric (ranges 0 to 360)	Numeric (ranges 0 to 360)	X

Examples

Pie Chart with Image

Pie Chart with Images

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 Image

• BackgroundImage property is set to URL (e.g. https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)

• All other control properties can be left as default

Gradient Pie Chart

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

• GradientShadeIntensity property is set to 5

• GradientOpcityFrom property is set to 5

• GradientOpcityTo property is set to 5

• GradientInverse property is set to true

• All other control properties can be left as default