Side By Side Placement in WPF Charts (SfChart)

16 Jun 20212 minutes to read

It defines the placement pattern of bar type series like Column, Bar, RangeColumn, etc.

It is a Boolean property and its default value is true so the segment will be placed adjacent to each other (Clustered).

Column Placed Side by Side in WPF Chart

The following code example and image illustrates the placement of series while setting SideBySideSeriesPlacement as false.

<chart:SfChart x:Name="columnChart" AreaBorderBrush="DarkGray" 

Header="Usage of Metals"  




<chart:CategoryAxis  Header="Metals"/>



<chart:NumericalAxis Header="Usage" />                            



<chart:ChartLegend Visibility="Visible" />


<chart:ColumnSeries Interior="#bcbcbc"

ItemsSource="{Binding SneakersDetail}" Label="2015"  


YBindingPath="ItemsCount" />

<chart:ColumnSeries ItemsSource="{Binding SneakersDetail}"  


Interior="#4a4a4a"  XBindingPath="Brand" 

Label="2014" YBindingPath="postion"/>            

SfChart chart = new SfChart();

chart.Header = "Usage of Metals";

chart.AreaBorderBrush = new SolidColorBrush(Colors.DarkGray);

chart.SideBySideSeriesPlacement = false;

chart.AreaBorderThickness = new Thickness(1);

chart.PrimaryAxis = new CategoryAxis()

    Header = "Medals"


chart.SecondaryAxis = new NumericalAxis()

    Header = "Usage"


chart.Legend = new ChartLegend()

    Visibility = Visibility.Visible


ColumnSeries columnSeries1 = new ColumnSeries()

    ItemsSource = new ViewModel().SneakersDetail,

    XBindingPath = "Brand",

    YBindingPath = "ItemsCount",

    Label = "2015",

    Interior = new SolidColorBrush(Color.FromRgb(0xbc, 0xbc, 0xbc)),


ColumnSeries columnSeries2 = new ColumnSeries()

    ItemsSource = new ViewModel().SneakersDetail,

    XBindingPath = "Brand",

    YBindingPath = "Position",

    Label = "2014",

    SegmentSpacing = 0.5,

    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),




Column Placed One over Another in WPF Chart


As the series will be placed one over the other(overlapped), to differentiate between the series the SegmentSpacing is used.