Version

Configuring Axis Label Settings

In the XamDataChart™ control, you can change the location, rotation angle, margin, horizontal/vertical alignment, visibility, and appearance of the axis label using the following properties of an Axis objects.

Property Name Property Type Description

String

Determines data mapping (category axis) and formatting (all axis) of labels

LabelSettings

Determines labels’ settings such foreground, font, alignment, margins, angle and many more. See also Configuring Axis Label Settings

double

Determines angle rotation of axis labels

double

Determines empty space that extents between axis labels and the axis main line

FontFamily

Determines font of axis labels

HorizontalAlignment

Determines horizontal alignment of labels on CategoryYAxis and NumericYAxis only

VerticalAlignment

Determines vertical alignment of labels on CategoryXAxis and NumericXAxis only

Determines location of axis labels in relation to axis main line and chart plot area

Visibility

Determines whether or not axis labels are visible

Brush

Determines text color of axis labels

The following sample code shows how to change the location, orientation angle, and appearance of the axis label on CategoryXAxis and NumericYAxis in the XamDataChart control.

In XAML:

<ig:XamDataChart x:Name="DataChart" >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis"
                          Label="{}{Date:MM/dd}"
                          ItemsSource="{Binding}" >
            <ig:CategoryXAxis.LabelSettings>
                <ig:AxisLabelSettings Foreground="Green"
                                    Location="OutsideBottom"
                                    Extent="40"
                                    Angle="45" />
                </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="yAxis" >
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Foreground="Red"
                                    Location="OutsideRight"
                                    Extent="40"
                                    Angle="-30" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
</ig:XamDataChart>

In C#:

var yAxis = new NumericYAxis();
var xAxis = new CategoryXAxis();
xAxis.Label = "Date";

xAxis.LabelSettings = new AxisLabelSettings();
xAxis.LabelSettings.Foreground = new SolidColorBrush(Colors.Green);
xAxis.LabelSettings.Location = AxisLabelsLocation.OutsideBottom;
xAxis.LabelSettings.Extent = 40;
xAxis.LabelSettings.Angle = 45;

yAxis.LabelSettings = new AxisLabelSettings();
yAxis.LabelSettings.Foreground = new SolidColorBrush(Colors.Red);
yAxis.LabelSettings.Location = AxisLabelsLocation.OutsideRight;
yAxis.LabelSettings.Extent = 40;
yAxis.LabelSettings.Angle = -30;

In Visual Basic:

Dim yAxis As New NumericYAxis()
Dim xAxis As New CategoryXAxis()
xAxis.Label = "Date"

xAxis.LabelSettings As New AxisLabelSettings()
xAxis.LabelSettings.Foreground = New SolidColorBrush(Colors.Green)
xAxis.LabelSettings.Location = AxisLabelsLocation.OutsideBottom
xAxis.LabelSettings.Extent = 40
xAxis.LabelSettings.Angle = 45

yAxis.LabelSettings As New AxisLabelSettings()
yAxis.LabelSettings.Foreground = New SolidColorBrush(Colors.Red)
yAxis.LabelSettings.Location = AxisLabelsLocation.OutsideRight
yAxis.LabelSettings.Extent = 40
yAxis.LabelSettings.Angle = -30

The following image shows how the XamDataChart control might look with custom label settings for CategoryXAxis and NumericYAxis.

xamDataChart Axis Label Settings 01.png

In order to remove a previous AxisLabelSettings, a new AxisLabelSettings must be added even if the Axis was previously cleared and re-added.

Related Content: