> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/column-chart.md).

# Column Chart

## 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 <a href="#chart-variations" id="chart-variations"></a>

![](/files/ee0WqnZaqx2f0IWfttp3)

‌There are several variations of column charts which are supported through the configuration of data and component properties.

* Basic Column Chart&#x20;
* Grouped Column Chart&#x20;
* Stacked Column Chart&#x20;
* 100% Stacked Column Chart&#x20;
* Reversed Column Chart&#x20;
* 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. &#x20;

{% tabs %}
{% tab title="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.

```markup
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.

![](/files/-MkaU4uYC8WHFyp8BKUw)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKF8e-prp7SCpLohRQ)

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

```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components.md)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="189">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td>Control Property</td><td>Description</td><td>Accepted Values</td><td>Required</td></tr><tr><td>ShowDistributed</td><td>Property to give each series a unique color.</td><td>Boolean</td><td>X</td></tr><tr><td>StackedType</td><td>Property to change sack type of a bar</td><td><p>None</p><p>Stacked </p><p>Stacked100</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>Show100HeightBar</td><td>Property to set 100% height of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Basic Column Chart

![Basic Column Chart](/files/-MkaW-pKsp4PRsi-YX1m)

{% tabs %}
{% tab title="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
            }
        ]
    }
        ]
    }
);
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Grouped Column Chart

![](/files/-MkaZ5FjoXL7z_DN0Jhf)

{% tabs %}
{% tab title="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
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Stacked Column Chart

![](/files/-Mkac6Vwx9MivY3BT_vE)

{% tabs %}
{% tab title="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
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### 100% Stacked Column Chart

![](/files/-Mkace9Q9NxC_Rd_S4GA)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection. Use the same collection used for [Stacked Column](/column-chart.md#stacked-column-chart) chart.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked100**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Reversed Column Chart

![](/files/-Mkaelblv3-vpokuJoT9)

{% tabs %}
{% tab title="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
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowReversed` property is set to **true**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Column Chart with Markers

![](/files/-MkaixS1cqYrlrtpcDpM)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection.

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

```

{% endtab %}

{% tab title="Property Configuration" %}
All other control properties can be left as default
{% endtab %}
{% endtabs %}

### Column Chart with Background

![](/files/-Mkak8qSMlxpsQTCarkk)

{% tabs %}
{% tab title="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](/column-chart.md#basic-column-chart) section.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Image**
* [x] `BackgroundImage`property is set to **with Image URL. (Example:** "<https://cdn.pixabay.com/photo/2017/11/04/21/09/textile-2918844_1280.jpg>")
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}