Area Chart

lowcodera Area Chart Component

Purpose

With their mountain-like appearance, Area Charts are used to represent quantitative variations.

Variations

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

Basic Area Chart
Spline Area Chart
Stepline Area Chart
Area chart with Dashline

Working with Data

‌The data format for the Area chart is the same as for other bar 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 ColAreaChart is defined in the Power App. The items property of the bar chart component is then bound to this collection.

Table(
    {
        name: "Actual",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Budgeted",
        data:ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ],{Value:ThisRecord})
    }
)

The above code snippet will generate the following bar 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.

ClearCollect(
    ColAreaChart,
    {
        name: "Actual",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Actual
                }
            }
        )
    },
    {
        name: "Budgeted",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Budget
                }
            }
        )
    }
)

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

LineType

Property to show different types of lines

Smooth

Stepline

Straight

DataLabelSymbol

Property to add any symbol (eg. currency or any appened words) along with data labels

Text

ShowReversed

Property to represent the Y-Axis from the right side

Boolean

FillType

Property to choose fill type for bars.

Gradient

Image

Solid

BackgroundImage

Property to provide background image URL for bars

URL

Examples

Basic Area Chart

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

All control properties can be left as default

Spline Area Chart

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

LineType property is set to Smooth
All other control properties can be left as default

Stepline Area Chart

More than one data series is defined in the data collection

ClearCollect(
    ColStackedColumnChart,
    {
        name: "Marine Sprite",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Striking Calf",
        data: ForAll([
            {
                label: 2001,
                value: 53
            },
            {
                label: 2002,
                value: 52
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 15
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 40
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Tank Picture",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 37
            },
            {
                label: 2003,
                value: 75
            },
            {
                label: 2004,
                value: 48
            },
            {
                label: 2005,
                value: 65
            },
            {
                label: 2006,
                value: 29
            },
            {
                label: 2007,
                value: 4
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Bucket Slope",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 12
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 25
            },
            {
                label: 2006,
                value: 24
            },
            {
                label: 2007,
                value: 10
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Reborn Kid",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 32
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 14
            },
            {
                label: 2006,
                value: 10
            },
            {
                label: 2007,
                value: 7
            }
        ],{Value:ThisRecord})
    }
)

LineType property is set to Stepline
All other control properties can be left as default

Area Chart with Dashline

More than one data series is defined in the data collection.

ClearCollect(
    ColAreaChartDashline,
    {
        name: "Population",
        dashlength: 7, // Resposible for Dashline
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Education",
        dashlength: 9,
        data: ForAll([
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value:ThisRecord})
    }
);

LineType property is set to Smooth
All other control properties can be left as default

PreviousVertical Navbar NextBar Chart

Last updated 2 years ago