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.

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)'
                }
            }
        )
    }
)

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.

Control Property

Description

Accepted Values

Required

ShowDistributed

Property to give each series a unique color.

Boolean

StackedType

Property to change sack type of a bar

None

Stacked

Stacked100

DataLabelSymbol

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

Text

Show100HeightBar

Property to set 100% height of the bar

Boolean

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

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
            }
        ]
    }
)

StackedType property is set to Stacked
All other control properties can be left as default

100% Stacked Bar Chart

More than one data series is defined in the data collection. Use the same collection used for Stacked Bar chart.

StackedType property is set to Stacked100
All other control properties can be left as default

Reversed Bar Chart

More than one data series is defined in the data collection. Use the same collection used for Stacked Bar chart.

ShowReversed property is set to true
All other control properties can be left as default

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.

FillType property is set to Image
BackgroundImageproperty is set to with Image URL. (Example: "https://cdn.pixabay.com/photo/2017/11/04/21/09/textile-2918844_1280.jpg")
All other control properties can be left as default