Column and Bar in WinUI Chart

14 Apr 20212 minutes to read

Column

Column charts plot discrete rectangles for the given values. The following code example demonstrates the usage of ColumnSeries.

<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "XValue",

    YBindingPath = "YValue",

};

chart.Series.Add(series);

Column chart type in WinUI

Bar

Bar series are similar to column series, excepts its orientation. The following code examples shows how to use BarSeries.

<chart:BarSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
BarSeries series = new BarSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "XValue",

    YBindingPath = "YValue",

};

Bar chart type in WinUI

Spacing

Spacing property of series is used to decide the width of a segment. Spacing value ranges from 0 to 1. The following code illustrates how to set Spacing property of the series.

<Chart:ColumnSeries Chart:ChartSeriesBase.Spacing="0.8"/>
ColumnSeries series = new ColumnSeries()

ChartSeriesBase.SetSpacing(series, 0.8);

Column Spacing support in WinUI

Segment Spacing

SegmentSpacing property is used to set the spacing among the segments, when multiple series are added in chart. Its value ranges from 0 to 1. The following code illustrates how to use the SegmentSpacing property in series.

<Chart:SfChart >

<Chart:ColumnSeries SegmentSpacing="0.6"/>

<Chart:ColumnSeries SegmentSpacing="0.6"/>

</Chart:SfChart>
SfChart chart = new SfChart();

ColumnSeries series1 = new ColumnSeries()
{

    SegmentSpacing = 0.6,

};

chart.Series.Add(series1);

ColumnSeries series2 = new ColumnSeries()
{

    SegmentSpacing = 0.6

};

chart.Series.Add(series2);

Column SegmentSpacing support in WinUI