Vertical Charts in WPF Charts (SfChart)

14 Jul 20215 minutes to read

SfChart provides support for vertical charts. You can plot vertical chart for any chart using IsTransposed and OpposedPosition properties.

OpposedPosition

Allows to position the axis in the opposite direction to the default position. The following code example illustrates placing the primary and secondary axes in opposite direction.

XAML

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis   OpposedPosition="True" >

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis Minimum="0" Maximum="40" Interval="10"                                   

OpposedPosition="True"/>

</chart:SfChart.SecondaryAxis>

C#

chart.PrimaryAxis = new CategoryAxis()
{

     OpposedPosition = true

};

chart.SecondaryAxis = new NumericalAxis()
{
     Minimum = 0,

     Maximum = 40,

     Interval = 10,

     OpposedPosition = true

};

IsTransposed

This property used to switch the plotting of the series to vertical.

XAML

<chart:LineSeries  IsTransposed="True"

ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 

YBindingPath="ItemsCount" >

C#

LineSeries series = new LineSeries()
{

     IsTransposed = true,

     ItemsSource = new ViewModel().SneakersDetail,

     XBindingPath = "Brand",

     YBindingPath = "ItemsCount"

};

The following example demonstrates the vertical charts.

XAML

<chart:SfChart>

<chart:SfChart.ColumnDefinitions>

<chart:ChartColumnDefinition />

<chart:ChartColumnDefinition/>

</chart:SfChart.ColumnDefinitions>

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  ShowGridLines="False“ >

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis/>

</chart:SfChart.SecondaryAxis>          

<chart:LineSeries   IsTransposed="True"  

ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 

YBindingPath="ItemsCount" >

<chart:LineSeries.AdornmentsInfo>

<chart:ChartAdornmentInfo  ShowMarker="True" Symbol="Ellipse" 

SymbolHeight="10" SymbolInterior="#7f7f7f" SymbolWidth="10">                        

</chart:ChartAdornmentInfo>                        

</chart:LineSeries.AdornmentsInfo>

</chart:LineSeries>

<chart:LineSeries  Interior="DarkGray" IsTransposed="True"

ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 

YBindingPath="postion" >

<chart:LineSeries.AdornmentsInfo>

<chart:ChartAdornmentInfo ShowLabel="False" ShowMarker="True" Symbol="Ellipse" SymbolHeight="10" 

SymbolInterior="DarkGray" SymbolWidth="10"></chart:ChartAdornmentInfo>

</chart:LineSeries.AdornmentsInfo>

<chart:LineSeries.YAxis>

<chart:NumericalAxis />

</chart:LineSeries.YAxis>

</chart:LineSeries>

</chart:SfChart>

C#

SfChart chart = new SfChart();

chart.ColumnDefinitions.Add(new ChartColumnDefinition());

chart.ColumnDefinitions.Add(new ChartColumnDefinition());

chart.PrimaryAxis = new CategoryAxis()
{

    ShowGridLines = true

};

NumericalAxis axis = new NumericalAxis();

chart.SecondaryAxis = axis;

ChartBase.SetColumn(axis, 1);

LineSeries series1 = new LineSeries()
{

    IsTransposed = true,

    ItemsSource = new ViewModel().SneakersDetail,

    XBindingPath = "Brand",

    YBindingPath = "ItemsCount"

};

ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo()
{

    ShowMarker = true,

    Symbol = ChartSymbol.Ellipse,

    SymbolHeight = 10,

    SymbolWidth = 10,

    SymbolInterior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),

};

LineSeries series2 = new LineSeries()
{

    IsTransposed = true,

    Interior = new SolidColorBrush(Colors.DarkGray),

    ItemsSource = new ViewModel().SneakersDetail,

    XBindingPath = "Brand",

    YBindingPath = "position",

    YAxis = new NumericalAxis()

};

ChartAdornmentInfo adornmentInfo2 = new ChartAdornmentInfo()
{

    ShowLabel = false,

    ShowMarker = true,

    Symbol = ChartSymbol.Ellipse,

    SymbolHeight = 10,

    SymbolWidth = 10,

    SymbolInterior = new SolidColorBrush(Colors.DarkGray),

};

series1.AdornmentsInfo = adornmentInfo1;

series2.AdornmentsInfo = adornmentInfo2;

ChartBase.SetColumn(series1, 0);

ChartBase.SetColumn(series2, 1);

chart.Series.Add(series1);

chart.Series.Add(series2);

NOTE

You can refer to our WPF Charts feature tour page for its groundbreaking feature representations. You can also explore our WPF Charts example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.