LogoLogo
  • Getting Started
    • Overview
    • Download components
    • Installing Components
    • Using a component
    • lowcodera App Tokens
  • UI Components
    • lowcodera UI Assets
    • Button
    • Card
    • Date time picker
    • Dropdown Menu
    • Horizontal Navbar
    • Icon
    • PowerGrid
    • Progress Bar
    • TextBox
    • Vertical Navbar
  • Visualization Components
  • Area Chart
  • Bar Chart
  • Column Chart
  • Donut Chart
  • Heatmap Chart
  • Kanban Board
  • Swimlane
  • Line Chart
  • Mixed Chart
  • Pie Chart
  • Polar Chart
  • Radar Chart
  • Radial Chart
  • Strategic Roadmap
  • Scatter Chart
  • Timeline Chart
  • Properties Reference
    • UI Component Properties
    • Chart Component Properties
    • Navbar Schema
  • Page 1
Powered by GitBook
On this page
  • Purpose
  • Variations
  • Working with Data
  • Chart Properties
  • Examples
  • Basic Column Chart
  • Grouped Column Chart
  • Stacked Column Chart
  • 100% Stacked Column Chart
  • Reversed Column Chart
  • Column Chart with Markers
  • Column Chart with Background

Was this helpful?

Column Chart

lowcodera Column Chart Component

PreviousBar ChartNextDonut Chart

Last updated 2 years ago

Was this helpful?

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

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

For a full listing of all chart properties see the

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

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

BackgroundImageproperty is set to with Image URL. (Example: "")

chart components property reference
Stacked Column
Basic Column Chart
https://cdn.pixabay.com/photo/2017/11/04/21/09/textile-2918844_1280.jpg
Basic Column Chart