Vertical Charts in WPF Charts (SfChart)

8 Jul 20267 minutes to read

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

OpposedPosition

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

<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>
chart.PrimaryAxis = new CategoryAxis()
{
    OpposedPosition = true
};

chart.SecondaryAxis = new NumericalAxis()
{
    Minimum = 0,
    Maximum = 40,
    Interval = 10,
    OpposedPosition = true
};

WPF Chart in Vertical Position

IsTransposed

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

<chart:LineSeries
    IsTransposed="True"
    ItemsSource="{Binding SneakersDetail}"
    XBindingPath="Brand"
    YBindingPath="ItemsCount">
</chart:LineSeries>
LineSeries series = new LineSeries()
{
    IsTransposed = true,
    ItemsSource  = new ViewModel().SneakersDetail,
    XBindingPath = "Brand",
    YBindingPath = "ItemsCount"
};

Transposing WPF Chart to Vertical Position

The following example demonstrates the vertical charts.

<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"
                SymbolWidth="10"
                SymbolInterior="#7f7f7f">
            </chart:ChartAdornmentInfo>
        </chart:LineSeries.AdornmentsInfo>
    </chart:LineSeries>

    <chart:LineSeries
        IsTransposed="True"
        Interior="DarkGray"
        ItemsSource="{Binding SneakersDetail}"
        XBindingPath="Brand"
        YBindingPath="position">

        <chart:LineSeries.AdornmentsInfo>
            <chart:ChartAdornmentInfo
                ShowLabel="False"
                ShowMarker="True"
                Symbol="Ellipse"
                SymbolHeight="10"
                SymbolWidth="10"
                SymbolInterior="DarkGray">
            </chart:ChartAdornmentInfo>
        </chart:LineSeries.AdornmentsInfo>

        <chart:LineSeries.YAxis>
            <chart:NumericalAxis/>
        </chart:LineSeries.YAxis>
    </chart:LineSeries>
</chart:SfChart>
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);

Transposing WPF chart to Vertical Position

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 know various chart types and how to easily configure them with built-in support for creating stunning visual effects.