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.

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

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

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

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

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