# WPF Column Chart

## Content



The Column Chart, just like the Bar Chart, represents variation in a data series over time or compares different items. It displays values of one or more items as vertical bars against Y-axis and arranges items or categories on X-axis.

You need to set the **ChartType** property to Column in the Property window, in the code behind, or in XAML to create the Column Chart.

Set the **Stacking** property to Stacked or Stacked100pc to create the stacking WPF Column Chart.

![WPF Column Chart](https://cdn.mescius.io/document-site-files/images/8ba28e07-1633-4a6a-9114-13b9f1f04eed/images/imagesext/wpfflexchartquickstart.png)

The code below demonstrates the implementation:

**xml**

```xml
<c1:C1FlexChart x:Name="flexChart" 
                BindingX="Country" 
                ItemsSource="{Binding DataContext.Data}" 
                ChartType="Column">
    <c1:C1FlexChart.Series>
        <c1:Series SeriesName="Sales" 
                   Binding="Sales"/>
        <c1:Series SeriesName="Expenses" 
                   Binding="Expenses"/>
    </c1:C1FlexChart.Series>
</c1:C1FlexChart>
```

### Code

```csharp
flexChart.ChartType = C1.Chart.ChartType.Column;
```

### Set Cluster Size

Similar to Bar charts, you can also adjust the space between the clusters of columns in Column charts by using the **ClusterSize** property of the **FlexChart** class. The **ClusterSize** property determines how much visual space the columns cluster take up on the plot area. You can set the size of clusters in terms of percentage and absolute value (i.e., in pixels) using the **Percentage** and **Absolute** enum constants, respectively. These constants belong to the **ElementSizeType** enumeration, which specifies the size type for the **ElementSize** object. You can increase the gap between the clusters by setting a lower value or decrease it by setting a higher value for the enum constants.

![WPF Column Chart](https://cdn.mescius.io/document-site-files/images/8ba28e07-1633-4a6a-9114-13b9f1f04eed/images/imagesext/flexchart_clustersize_column.png)

For setting the size of column clusters in percentage, you can use the following C# code:

```csharp
flexChart.Options.ClusterSize = new C1.Chart.ElementSize() { SizeType = C1.Chart.ElementSizeType.Percentage, Value = 50};
```

For setting the absolute size of column clusters, you can use the following C# code:

```csharp
flexChart.Options.ClusterSize = new C1.Chart.ElementSize() { SizeType = C1.Chart.ElementSizeType.Absolute, Value = 50 };
```