# chart-column-chart

> Column chart of population growth across countries with CategoryAxis, NumericalAxis, percentage data labels, animation, and themed palette brushes.

**Framework:** winui  **Component:** Chart  **Variant:** column-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/winui/chart-column-chart.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Chart.WinUI
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-column-chart/Chart.xaml

```xaml
<Page
    x:Class="Syncfusion.ChartDemos.WinUI.Views.ColumnChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Syncfusion.ChartDemos.WinUI"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="Transparent"
    mc:Ignorable="d">

    <Grid x:Name="grid">
        <Grid.Resources>
                <Style TargetType="Line" x:Name="lineStyle">
                    <Setter Property="StrokeThickness" Value="0"/>
                </Style>
                <Style TargetType="Line" x:Name="tickLineStyle">
                    <Setter Property="StrokeThickness" Value="0"/>
                    <Setter Property="Stroke" Value="Transparent"/>
                </Style>
        </Grid.Resources>
        <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto">
            <common:DemoLayout HeaderText="This column chart showcases the population growth trends of different countries.">
                <common:DemoLayout.DataContext>
                    <local:ColumnChartViewModel />
                </common:DemoLayout.DataContext>
                <common:DemoLayout.Example>
                    <chart:SfCartesianChart x:Name="Chart" Header="Population Growth of Various Countries" Height="420" VerticalAlignment="Bottom" 
                                          PaletteBrushes="{ThemeResource ChartPalette}">

                        <chart:SfCartesianChart.XAxes>
                            <chart:CategoryAxis ShowMajorGridLines="False" LabelPlacement="BetweenTicks" />
                        </chart:SfCartesianChart.XAxes>

                        <chart:SfCartesianChart.YAxes>
                            <chart:NumericalAxis ShowMinorGridLines="false" Interval="0.5" TickLineSize="10"
                                                   MajorTickStyle="{StaticResource tickLineStyle}"  AxisLineStyle="{StaticResource lineStyle}">
                                <chart:NumericalAxis.LabelStyle>
                                    <chart:LabelStyle LabelFormat="0.0' %" FontSize="12"/>
                                </chart:NumericalAxis.LabelStyle>
                            </chart:NumericalAxis>
                        </chart:SfCartesianChart.YAxes>

                        <chart:ColumnSeries EnableAnimation="True" ItemsSource="{Binding DefaultColumnData}" Label="Countries"
                        XBindingPath="Name" YBindingPath="Value" ShowDataLabels="True">
                            <chart:ColumnSeries.DataLabelSettings>
                                <chart:CartesianDataLabelSettings Position="Inner"/>
                            </chart:ColumnSeries.DataLabelSettings>
                        </chart:ColumnSeries>
                    </chart:SfCartesianChart>
                </common:DemoLayout.Example>
                <common:DemoLayout.Xaml>
<x:String xml:space="preserve">
&lt;chart:SfCartesianChart x:Name=&quot;Chart&quot; Header=&quot;Population Growth of Various Countries&quot; 
                     PaletteBrushes=&quot;{ThemeResource ChartPalette}&quot;&gt;
    
 &lt;chart:SfCartesianChart.XAxes&gt;
    &lt;chart:CategoryAxis ShowMajorGridLines=&quot;False&quot; LabelPlacement=&quot;BetweenTicks&quot;/&gt; 
 &lt;/chart:SfCartesianChart.XAxes&gt;

 &lt;chart:SfCartesianChart.YAxes&gt; 
    &lt;chart:NumericalAxis ShowMinorGridLines=&quot;false&quot; Interval=&quot;0.5&quot;
                TickLineSize=&quot;10&quot; MajorTickStyle=&quot;{StaticResource tickLineStyle}&quot; 
                AxisLineStyle=&quot;{StaticResource lineStyle}&quot;&gt;  
    &lt;chart:NumericalAxis.LabelStyle&gt; 
    &lt;chart:LabelStyle LabelFormat=&quot;0.0' %&quot; FontSize=&quot;12&quot;/&gt; 
    &lt;/chart:NumericalAxis.LabelStyle&gt; &lt;/chart:NumericalAxis&gt; 
 &lt;/chart:SfCartesianChart.YAxes&gt;
     
 &lt;chart:ColumnSeries ItemsSource=&quot;{Binding DefaultColumnData}&quot;
                     XBindingPath=&quot;Name&quot; 
                     YBindingPath=&quot;Value&quot;
                     EnableAnimation=&quot;True&quot; 
                     ShowDataLabels=&quot;True&quot;&gt;
    &lt;chart:ColumnSeries.DataLabelSettings&gt;
        &lt;chart:CartesianDataLabelSettings Position=&quot;Inner&quot;/&gt;
    &lt;/chart:ColumnSeries.DataLabelSettings&gt;
 &lt;/chart:ColumnSeries&gt;
&lt;/chart:SfCartesianChart&gt;
</x:String>
                </common:DemoLayout.Xaml>
            </common:DemoLayout>
        </ScrollViewer>
    </Grid>
</Page>

```