Telerik UI for Windows Phone by Progress

Axis

RadChart plots data points in a coordinate system defined by its two axes. There are a few different types of axes and they are: Linear, Logarithmic, DateTime and Categorical. This article discusses the common characteristics of all the axes as well as the specifics of the LinerAxis. The other types are discussed in their respective help articles.

The chart axis is represented by the abstract Axis class and is responsible for displaying ticks which simply mark values on the axis at fixed positions. The axis also displays labels which are used to provide a visualization of the values at some or all of the ticks. The default visualization of the labels is text.

radchart-axes-ticksandlabels

The axis labels can be laid out in specific ways in order to improve their readability when they become  too long and start to overlap each other. One of these, let’s call them label fit modes, positions the labels on different lines and the other fit mode rotates the labels some user defined degree so that they appear inclined or orthogonal to the axis making them easier to read.

radchart-axes-labelfitmode

The axis supports arbitrary visualization of the ticks and labels through DataTemplate objects and also supports a dash array and a stroke color for the visualization of the axis line. For increased flexibility the label templates can be selected dynamically with a template selector.

CopyXAML
<Grid.Resources>
    <DataTemplate x:Key="GrayTemplate">
        <Border BorderThickness="2"
                 BorderBrush="Gray">
             <TextBlock Text="{Binding}"/>
         </Border>
    </DataTemplate>

    <DataTemplate x:Key="WhiteTemplate">
        <Border BorderThickness="2"
                 BorderBrush="White">
            <TextBlock Text="{Binding}"/>
         </Border>
     </DataTemplate>

    <local:BinaryTemplateSelector x:Name="Selector"
        Template1="{StaticResource GrayTemplate}"
        Template2="{StaticResource WhiteTemplate}"/>
</Grid.Resources>

<chart:RadCartesianChart x:Name="chart">
    <chart:RadCartesianChart.HorizontalAxis>
        <chart:LinearAxis Maximum="100" 
            LineStroke="Gray" 
            LineDashArray="5, 10, 15" 
            TickThickness="5" 
            LabelTemplateSelector="{StaticResource Selector}">

            <chart:LinearAxis.MajorTickTemplate>
                <DataTemplate>
                    <Ellipse
                        Fill="White"/>
                </DataTemplate>
            </chart:LinearAxis.MajorTickTemplate>
        </chart:LinearAxis>
    </chart:RadCartesianChart.HorizontalAxis>

    <chart:RadCartesianChart.VerticalAxis>
        <chart:LinearAxis Maximum="100"/>
    </chart:RadCartesianChart.VerticalAxis>
</chart:RadCartesianChart>
CopyC#
public class BinaryTemplateSelector : DataTemplateSelector
{
   public DataTemplate Template1
   {
       get;
       set;
   }
   public DataTemplate Template2
   {
       get;
       set;
   }
   public override DataTemplate SelectTemplate(object item, DependencyObject container)
   {
       DataTemplate tmp = this.Template1;
       this.Template1 = this.Template2;
       this.Template2 = tmp;
       return tmp;
   }
}
CopyVB.NET
Public Class BinaryTemplateSelector
    Inherits DataTemplateSelector
    Private _template1 As DataTemplate
    Private _template2 As DataTemplate

    Public Property Template1 As DataTemplate
        Get
            Return Me._template1
        End Get
        Set(value As DataTemplate)
            Me._template1 = value
        End Set
    End Property
    Public Property Template2 As DataTemplate
        Get
            Return Me._template2
        End Get

        Set(value As DataTemplate)
            Me._template2 = value
        End Set
    End Property
    Public Overrides Function SelectTemplate(item As Object, container As System.Windows.DependencyObject) As System.Windows.DataTemplate
        Dim tmp As DataTemplate
        tmp = Me.Template1
        Me.Template1 = Me.Template2
        Me.Template2 = tmp
        Return tmp
    End Function
End Class

radchart-axes-axisconfig

The linear axis is a plain numerical axis, that is, the LinearAxis class inherits from NumericalAxis and NumericalAxis itself inherits from Axis. NumericalAxis  defines only a few features on top of the abstract Axis class and these are a value range, the ability to specify a step for the major ticks and a format string that will be used to format the text in the axis labels. The major step determines at which values will major ticks be displayed.