Column Chart
lowcodera Column Chart Component
Purpose
Column charts are useful for showing data changes over a period of time or for illustrating comparisons among items. In column charts, categories are typically organized along the horizontal axis and values along the vertical axis.
Variations
There are several variations of column charts which are supported through the configuration of data and component properties.
Basic Column Chart
Grouped Column Chart
Stacked Column Chart
100% Stacked Column Chart
Reversed Column Chart
Column Chart with markers
Column Chart with background
Working with Data
The data format for the column chart is the same as for other column 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 ColColumnChartBasic is defined in the Power App. The items property of the column chart component is then bound to this collection.
Table(
{
name: "Population",
data: [
{
label: "South Korea",
value: 400
},
{
label: "Canada",
value: 430
},
{
label: "United Kingdom",
value: 448
},
{
label: "Netherlands",
value: 500
},
{
label: "Italy",
value: 700
},
{
label: "France",
value: 1100
},
{
label: "Japan",
value: 1500
},
{
label: "United States",
value: 1456
},
{
label: "Germany",
value: 1700
}
]
}
)
The above code snippet will generate the following column 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.
Table(
{
name: "Population",
data: ForAll(
//Replace Populations with the name of your datasource
Populations,
{
Value: {
label: ThisRecord.Country,
value: ThisRecord.'Population (cr375_population)'
}
}
)
}
)
All control properties can be left as default
Chart Properties
The properties below are the main ones which change this components appearance and behaviours.
Control Property
Description
Accepted Values
Required
ShowDistributed
Property to give each series a unique color.
Boolean
X
StackedType
Property to change sack type of a bar
None
Stacked
Stacked100
X
DataLabelSymbol
Property to add any symbol (eg. currency or any appened words) along with data labels
Text
X
Show100HeightBar
Property to set 100% height of the bar
Boolean
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 Column Chart
A single data series is defined in the collection
ClearCollect(
ColColumnChart,
{
name: "Population",
data: [
{
label: "South Korea",
value: 400
},
{
label: "Canada",
value: 430
},
{
label: "United Kingdom",
value: 448
},
{
label: "Netherlands",
value: 500
},
{
label: "Italy",
value: 700
},
{
label: "France",
value: 1100
},
{
label: "Japan",
value: 1500
},
{
label: "United States",
value: 1456
}
,
{
label: "Germany",
value: 1700
}
]
}
]
}
);All control properties can be left as default
Grouped Column Chart
More than one data series is defined in the collection
ClearCollect(
ColColumnChart,
{
name: "Series-1",
data: [
{
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
}
]
},
{
name: "Series-2",
data: [
{
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
}
]
}
)All control properties can be left as default
Stacked Column Chart
More than one data series is defined in the data collection
ClearCollect(
ColStackedColumnChart,
{
name: "Marine Sprite",
data: [
{
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
}
]
},
{
name: "Striking Calf",
data: [
{
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
}
]
},
{
name: "Tank Picture",
data: [
{
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
}
]
},
{
name: "Bucket Slope",
data: [
{
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
}
]
},
{
name: "Reborn Kid",
data: [
{
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
}
]
}
)100% Stacked Column Chart
More than one data series is defined in the data collection. Use the same collection used for Stacked Column chart.
Reversed Column Chart
One or More than one data series is defined in the data collection.
ClearCollect(
ColColumnChartRev,
{
name: "Population",
data: [
{
label: "June",
value: 400
},
{
label: "July",
value: 430
},
{
label: "August",
value: 448
},
{
label: "September",
value: 500
},
{
label: "October",
value: 700
},
{
label: "France",
value: 1100
},
{
label: "November",
value: 1500
},
{
label: "December",
value: 1456
}
]
}
);
Column Chart with Markers
One or More than one data series is defined in the data collection.
Table(
{
name: "Actual",
color: "#546E7A",
expectedlabel: "Expected",
data: [
{
label: "2011",
value: 1200,
color: "#00e396",
expectedlabel: "Expected",
expectedvalue: 1400,
expectedcolor: "#FF0000"
},
{
label: "2012",
value: 4000,
color: "#00e396",
expectedlabel: "Expected",
expectedvalue: 3500,
expectedcolor: "#FF0000"
},
{
label: "2013",
value: 5400,
color: "#00e396",
expectedvalue: 5500,
expectedlabel: "Expected",
expectedcolor: "#FF0000"
},
{
label: "2014",
value: 8000,
color: "#00e396",
expectedvalue: 6000,
expectedlabel: "Expected",
expectedcolor: "#FF0000"
},
{
label: "2015",
value: 7000,
color: "#00e396",
expectedvalue: 8000,
expectedlabel: "Expected",
expectedcolor: "#FF0000"
}
]
}
)
All other control properties can be left as default
Column Chart with Background
One or More than one data series is defined in the data collection. You can use same collection created in Basic Column Chart section.
Last updated
Was this helpful?