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.

Static Collection Example

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.

Dynamic Collection Example

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

Property Configuration

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.

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

Basic Column Chart

Data Configuration

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

Property Configuration

All control properties can be left as default

Grouped Column Chart

Data Configuration

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

Property Configuration

All control properties can be left as default

Stacked Column Chart

Data Configuration

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

Property Configuration

• StackedType property is set to Stacked

• All other control properties can be left as default

100% Stacked Column Chart

Data Configuration

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

Property Configuration

• StackedType property is set to Stacked100

• All other control properties can be left as default

Reversed Column Chart

Data Configuration

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

Property Configuration

• ShowReversed property is set to true

• All other control properties can be left as default

Column Chart with Markers

Data Configuration

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

Property Configuration

All other control properties can be left as default

Column Chart with Background

Data Configuration

One or More than one data series is defined in the data collection. You can use same collection created in Basic Column Chart section.

Property Configuration

• 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