Donut Chart

Lowcodera Donut Chart Component

Purpose

Donut charts are used to show the proportions of categorical data, with the size of each piece representing the proportion of each category.

Variations

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

• Basic Donut Chart

• Donut Chart with Image

• Gradient Donut Chart

Working with Data

‌The data format for the Donut 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 table with static data called ColDonutChart is defined in the Power App. The items property of the donut 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 Donut 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.

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

Property	Description	Accepted Values	Required
DataLabelSymbol	Property to add any symbol (eg. currency or any append words) along with data labels	Text	X
FillType	Property to choose fill type for donut chart.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for donut	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

Donut Chart with Image

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

Donut 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 3

• GradientOpcityFrom property is set to 5

• GradientOpcityTo property is set to 7

• GradientInverse property is set to true

• All other control properties can be left as default