Bar Chart
lowcodera Bar Chart Component
Purpose
‌Bar charts are typically used to compare several categories of data. Bar charts are ideal for visualizing the distribution or proportion of data items when there are more than three categories‌.
Variations
‌There are several variations of bar charts which are supported through configuration of data and component properties.
Basic Bar Chart
Grouped Bar Chart
Stacked Bar Chart
100% Stacked Bar Chart
Reversed Bar Chart
Bar Chart with markers
Image background Bar Chart
​Working with Data
‌The data format for the bar chart is the same as for other XY 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 colBarChart is defined in the Power App. The items property of the bar 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 bar chart.
Chart Properties
The properties below are the main ones which change this components appearance and behaviors.
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 append 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
Grouped Bar Chart
More than one data series is defined in the data collection
ClearCollect(
ColBarChartGroup,
{
name: "Actual",
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: "Budget",
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
}
]
}
)Stacked Bar Chart
More than one data series is defined in the data collection.
ClearCollect(
ColStackedBarChart,
{
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 Bar Chart
More than one data series is defined in the data collection. Use the same collection used for Stacked Bar chart.
Reversed Bar Chart
More than one data series is defined in the data collection. Use the same collection used for Stacked Bar chart.
Bar 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"
}
]
}
)Bar Chart with Background
One or More than one data series is defined in the data collection. You can use same collection created in Working with Data section.
Last updated
Was this helpful?