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.
Chart Properties
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
X
DataLabelSymbol
Property to add any symbol (eg. currency or any appened words) along with data labels
Text
X
ShowReversed
Property to represent the Y-Axis from the right side
Boolean
X
FillType
Property to choose fill type for bars.
Gradient
Image
Solid
X
BackgroundImage
Property to provide background image URL for bars
URL
X
Examples
Basic Area Chart
A single or multiple data series is defined in the collection. You can use the same collection used in section.
Spline Area Chart
A single or multiple data series is defined in the collection. You can use the same collection used in section.
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})
}
)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})
}
);
Last updated
Was this helpful?