Edit this page

Axes

The 3D space in the RadCartesianChart3D control is defined by three axes, one for each dimension – X, Y and Z. Currently, there are a couple of axis types that can be used with the 3D chart - LinearAxis3D and CategoricalAxis3D.

Figure 1: Axes

Common Features

The linear and categorical 3D axes share some common features which you can find listed below.

  • Labels visibility: You can control the visibility of the axis labels using the ShowLabels bool property.

    Example 1: Setting the labels visibility

        <telerik:LinearAxis3D ShowLabels="False"/>
    

    Figure 2: The labels of all axes are hidden

  • Label interval: You can set the interval between the visible labels of the axis using the LabelInterval property. This allows you to display labels only at a specific step.

    Example 2: Setting the label interval

        <telerik:LinearAxis3D LabelInterval="2" />
    

    Figure 3: Label interval

  • Label style: You can define a custom style for the axis labels using the LabelStyle property. The property accepts an object of type Style that targets a TextBlock element.

    Example 3: Setting the label style

        <telerik:LinearAxis3D>
          <telerik:LinearAxis3D.LabelStyle>
             <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="#CA5100" />
                   <Setter Property="FontWeight" Value="Bold" />
               </Style>
           </telerik:LinearAxis3D.LabelStyle>
        </telerik:LinearAxis3D>
    

    Figure 4: Label style

  • Label template: You can create a DataTemplate that defines the appearance of the axis labels and set it to the LabelTemplate property of the axis.

    Example 4: Setting the label template

        <telerik:LinearAxis3D>                    
            <telerik:LinearAxis3D.LabelTemplate>
                <DataTemplate>
                    <Grid Margin="2">
                        <Rectangle Fill="#2DB245" Width="16" Height="16" />
                        <TextBlock Text="{Binding}" Foreground="White" TextAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </telerik:LinearAxis3D.LabelTemplate>
        </telerik:LinearAxis3D>
    

    Figure 5: Label template

  • Ticks length: You can define the length of the axis ticks using the MajorTickLength property.

    Example 5: Setting the label template

        <telerik:LinearAxis3D MajorTickLength="15">
    

    Figure 6: Tick length

  • Plot mode: You can set the strategy for positioning the data points along the axis using the PlotMode property of the axis.

    Example 6: Setting the plot mode

        <telerik:CategoricalAxis3D PlotMode="BetweenTicks">
    


    The PlotMode property can have the following values:
    • BetweenTicks: The data points are plotted between each two adjacent ticks.
    • OnTicks: The data points are plotted over each tick.
    • OnTicksPadded: The data points are plotted over each tick with half a step applied on both ends of the axis.

    Figure 7: Plot modes

  • Title: The Title property allows you to display a heading positioned next to the axis. To customize the title appearance you can use the TitleTemplate property.

    Example 7: Setting the axis title

        <telerik:CategoricalAxis3D Title=”Axis title">
    

    Figure 8: Axis title

    Example 8: Setting the axis title template

        <telerik:LinearAxis3D Title="Axis title">
            <telerik:LinearAxis3D.TitleTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Background="#2DB245" Foreground="White" Padding="3"  />
                </DataTemplate>
            </telerik:CategoricalAxis3D.TitleTemplate>
        </telerik:CategoricalAxis3D>
    

    Figure 9: Axis title template

  • Smart labels: You can avoid labels overlapping with the smart labels strategy of the axis. To enable this feature you can use the SmartLabelsMode property.

    Example 9: Enabling the axis smart labels

        <telerik:CategoricalAxis3D SmartLabelsMode="SmartStep">
    

    Figure 10: Smart labels mode

LinearAxis3D

This type of axis has a notion of range which means that it has minimum, maximum and a numeric step between its values. The axis can be used to plot numeric data. You can find the axis specific features listed below.

  • Desired tick count: You can use the DesiredTickCount property of the axis to set the number of the desired ticks that will be displayed on the axis. Note that the property doesn’t set a fixed number of ticks, but it defines the preferred count and the chart tries to calculate them accordingly.

    Example 10: Setting the desired tick count

        <telerik:LinearAxis3D DesiredTickCount="3" />
    
  • Manual range: You can use the Minimum and Maximum properties of the axis to set the range manually. To control the step between the ticks you can use the MajorStep property.

    Example 11: Setting manual range

        <telerik:LinearAxis3D Minimum=”0” Maximum=”10” MajorStep="2.5" />
    

    Figure 11: Manual range

  • Tick origin: The axis tick positions are determined by the MajorStep and the TickOrigin properties. The ticks will be generated such that a tick is positioned at the given TickOrigin.

    Example 12: Setting the axis title

        <telerik:LinearAxis3D Minimum="0" Maximum="10" MajorStep="2.5" TickOrigin="5"/>
    

    Figure 12: Tick origin

  • Label format: You can use the LabelFormat property to format the values of the axis labels.

    Example 13: Setting the axis title

        <telerik:LinearAxis3D LabelFormat="P0"/>
    

    Figure 13: Label format

See Also