Telerik UI for Windows Phone by Progress

Since Q1 2013 SP1 RadChart for Windows Phone 8 supports multiple axes. It may be required when series of a different scale should be presented on the same graph. Additional horizontal / vertical axes can be specified through the CartesianSeries.HorizontalAxis / VerticalAxis properties.

This help article will demonstrate the different scenarios in which you may use the multiple axes feature.

Note

You may have both multiple Vertical and multiple Horizontal axes in the same chart. There is no limit in the number of the axes that can be used.

It is now easier than ever to customize each axis separately. For example you may colorize all axis elements (line, ticks, labels and title) simultaneously with a single Axis.ElementBrush property. You may also specify the position of horizontal / vertical axes through the Axis.HorizontalLocation / VerticalLocation enumeration properties respectively. The usage of these properties is shown in the scenarios below.

Two Vertical Axes

This is one of the most common scenarios - two or more chart series that have a common Vertical Axis. Please take a look at the following example where two line series has their own vertical axis and share a common horizontal axis.

CopyXAML
 <telerik:RadCartesianChart>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="100"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:LineSeries Stroke="Orange" StrokeThickness="2">
            <telerik:LineSeries.DataPoints>
                <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="35"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="30"/>
        <telerikCharting:CategoricalDataPoint Value="50"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>

        <telerik:LineSeries Stroke="Blue" StrokeThickness="2">
            <telerik:LineSeries.VerticalAxis>
                <telerik:LinearAxis HorizontalLocation="Right"/>
            </telerik:LineSeries.VerticalAxis>
            <telerik:LineSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Value="30"/>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="15"/>
        <telerikCharting:CategoricalDataPoint Value="50"/>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="60"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Rad Chart View-chart axes twoverticalaxes

Two Horizontal Axes

This is one of the most common scenarios - two or more chart series that have a common Vertical Axis. Please take a look at the following example where two line series has their own vertical axis and share a common horizontal axis.

CopyXAML
<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="100"/>
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.Series>
        <telerik:LineSeries Stroke="Orange" StrokeThickness="2">
            <telerik:LineSeries.DataPoints>
              <telerikCharting:CategoricalDataPoint Value="20"/>
              <telerikCharting:CategoricalDataPoint Value="40"/>
              <telerikCharting:CategoricalDataPoint Value="35"/>
              <telerikCharting:CategoricalDataPoint Value="40"/>
              <telerikCharting:CategoricalDataPoint Value="30"/>
              <telerikCharting:CategoricalDataPoint Value="50"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
        <telerik:LineSeries Stroke="Blue" StrokeThickness="2">
            <telerik:LineSeries.HorizontalAxis>
                <telerik:CategoricalAxis VerticalLocation="Top" />
            </telerik:LineSeries.HorizontalAxis>
            <telerik:LineSeries.DataPoints>
              <telerikCharting:CategoricalDataPoint Category="A" Value="30"/>
              <telerikCharting:CategoricalDataPoint Category="B" Value="20"/>
              <telerikCharting:CategoricalDataPoint Category="C" Value="15"/>
              <telerikCharting:CategoricalDataPoint Category="D" Value="50"/>
              <telerikCharting:CategoricalDataPoint Category="E" Value="20"/>
              <telerikCharting:CategoricalDataPoint Category="F" Value="60"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Rad Chart View-chart axes twohorizontalaxes

Shared Horizontal Axis

There are cases where you would like to have two horizontal axes and a common vertical axis. For example you may want one of your series to be plotted on categorical axis while another one - on a linear axis.

To achieve this you should create an axis collection (a simple class that inherits System.Collections.ObjectModel.Collection<Axis>). Add it as a static resource in XAML and you may reuse for each series that will share a common axis.
CopyXAML
xmlns:chart="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:collection="clr-namespace:ChartView">

<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.Resources>
        <collection:AxisCollection x:Key="additionalHorizontalAxis">
            <telerik:CategoricalAxis VerticalLocation="Bottom" />
        </collection:AxisCollection>
    </telerik:RadCartesianChart.Resources>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis VerticalLocation="Top" />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="100"/>
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries HorizontalAxis="{Binding Source={StaticResource additionalHorizontalAxis}, Path=[0]}">
            <telerik:BarSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Category="A" Value="30"/>
        <telerikCharting:CategoricalDataPoint Category="B" Value="20"/>
        <telerikCharting:CategoricalDataPoint Category="C" Value="15"/>
        <telerikCharting:CategoricalDataPoint Category="D" Value="50"/>
        <telerikCharting:CategoricalDataPoint Category="E" Value="20"/>
        <telerikCharting:CategoricalDataPoint Category="F" Value="60"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
        <telerik:BarSeries HorizontalAxis="{Binding Source={StaticResource additionalHorizontalAxis}, Path=[0]}">
            <telerik:BarSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Category="A" Value="7"/>
        <telerikCharting:CategoricalDataPoint Category="B" Value="12"/>
        <telerikCharting:CategoricalDataPoint Category="C" Value="11"/>
        <telerikCharting:CategoricalDataPoint Category="D" Value="34"/>
        <telerikCharting:CategoricalDataPoint Category="E" Value="28"/>
        <telerikCharting:CategoricalDataPoint Category="F" Value="54"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
        <telerik:LineSeries StrokeThickness="2" Stroke="Red">
            <telerik:LineSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="35"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="30"/>
        <telerikCharting:CategoricalDataPoint Value="50"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
</Grid>

Rad Chart View-chart axes sharedhorizontalaxis

Shared Vertical Axis

The approach is absolutely the same as the one presented in Sharing Horizontal Axis amongst series section. Here's an example:

CopyXAML
xmlns:chart="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:collection="clr-namespace:ChartView">

<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.Resources>
        <collection:AxisCollection x:Key="additionalVerticalAxis">
            <telerik:LinearAxis HorizontalLocation="Right" />
        </collection:AxisCollection>
    </telerik:RadCartesianChart.Resources>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="100" />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries VerticalAxis="{Binding Source={StaticResource additionalVerticalAxis}, Path=[0]}">
            <telerik:BarSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Value="30"/>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="15"/>
        <telerikCharting:CategoricalDataPoint Value="50"/>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="60"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
        <telerik:BarSeries VerticalAxis="{Binding Source={StaticResource additionalVerticalAxis}, Path=[0]}">
            <telerik:BarSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Value="7"/>
        <telerikCharting:CategoricalDataPoint Value="12"/>
        <telerikCharting:CategoricalDataPoint Value="11"/>
        <telerikCharting:CategoricalDataPoint Value="34"/>
        <telerikCharting:CategoricalDataPoint Value="28"/>
        <telerikCharting:CategoricalDataPoint Value="54"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
        <telerik:LineSeries StrokeThickness="2" Stroke="Red">
            <telerik:LineSeries.DataPoints>
        <telerikCharting:CategoricalDataPoint Value="20"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="35"/>
        <telerikCharting:CategoricalDataPoint Value="40"/>
        <telerikCharting:CategoricalDataPoint Value="30"/>
        <telerikCharting:CategoricalDataPoint Value="50"/>
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
</Grid>

Rad Chart View-chart axes sharedverticalaxis