Overview

The Cartesian Chart plots data points in a coordinate system defined by its two axes. Instead of having one axis type that does hundreds of things, axes provides a hierarchy where each concrete axis type exposes a specific functionality.

Axes Class Diagram

The predefined axis types are:

Common Axis Features

The common axis functionality is encapsulated by the abstract Axis class and is responsible for displaying ticks that simply mark values on the axis at fixed positions. The axis also displays labels that are used to provide a visualization of the values at some or all of the ticks. The default visualization of the labels is text, and the default visuals created internally are text blocks.

The following sections list all the properties exposed by the base axis type.

Label Style and Position

You can customize the labels orientation and style with the following properties:

  • LabelFitMode—Specifies how labels that exceed the axis bounding rectangle will be positioned. The available fit options are:
    • MultiLine—Arranges axis labels on multiple lines with each label located on a line different from its neighbor labels.
    • Rotate—Arranges the axis labels so that they are rotated some degrees around their top left corner.
  • LabelFontSize—Specifies the font size of the labels.
  • LabelTextColor—Specifies the color of the labels.

The following example demonstrates how to define the LabelFitMode and the font size and color of the label.

<telerik:CategoricalAxis LabelFitMode="Rotate"
                              LabelFontSize="25"
                              LabelTextColor="#FFCC88CC"/>

Label Format

You can customize the labels text with the following properties:

  • LabelFormat—Provides a format string that will be used when converting the label value to a string. Each axis type requires different format:
    • NumericalAxis—Any numeric format like "N", "P2".
    • DateTimeContinuousAxis—Any date format like "dd-MM-yy", "HH:mm".
    • CategoricalAxis"{0} items", "{0:N}".
  • LabelFormatter—Specifies a custom formatter that implements the ILabelFormatter interface to apply a custom rule for setting each label text.

The following example shows how to set LabelFormat to a Numerical Axis:

<telerik:NumericalAxis LabelFormat="C"
                            MajorStep="0.5"
                            Minimum="-1"
                            Maximum="1" />

Label Formatter

The LabelFormatterBase<T> class is a base implementation of the ILabelFormatter interface that can be used in the most common scenarios.

The following example shows how to set a label formatter for the Date-Time Continuous Axis.

You can apply it in the following way:

<telerik:DateTimeContinuousAxis LabelFitMode="Rotate"
                                     MajorStepUnit="Day">
    <telerik:DateTimeContinuousAxis.LabelFormatter>
        <local:DateLabelFormatter />
    </telerik:DateTimeContinuousAxis.LabelFormatter>
</telerik:DateTimeContinuousAxis>

Styling the Axis Line and Ticks

You can customize the appearance of the axis line and ticks with the following properties:

  • MajorTickBackgroundColor—Specifies the major ticks color.
  • MajorTickThickness—Specifies the thickness of the major ticks.
  • LineColor—Specifies the color of the axis line.
  • LineDashArray—Specifies the array that is used to create a dash line, which will be applied to the axis line.

The following example demonstrates how to define the major ticks color and set their thickness and line color.

    <telerik:NumericalAxis MajorTickBackgroundColor="#FFCC88CC"
                                MajorTickThickness="5"
                                LineColor="#FFCC88CC"/>

Location

You can specify the location of the axis with the following properties:

  • HorizontalLocation—Specifies the horizontal location of the axis. Applicable for vertical axes.
  • VerticalLocation—Specifies the vertical location of the axis. Applicable for horizontal axes.

The following example demonstrates how to set a vertical location for the axis.

    <telerik:CategoricalAxis VerticalLocation="Top"/>

See Also

In this article
Not finding the help you need?