Configuring Axis Title

Purpose

This topic provides information on setting an axis title on the XamDataChart™ control.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
Getting Started with Data Chart	The XamDataChart requires a data object model to be mapped to control’s DataContext property. This article will provide a simple data object model but you can create your own and use it with this sample code instead.
Configuring Axis Label Settings	This topic provides information on setting appearance properties of axis labels.

In this topic

This topic contains the following sections:

Axis Title
- Overview
- Preview
- Properties
- Example
Related Content

Axis Title

Overview

The axis title feature of the XamDataChart control allows you to add contextual information to the x and y axes of the XamDataChart control.

You can customize the axis title by specifying properties of the TitleSettings object such as the angle, font size and position.

Preview

The following screenshot is a preview of the XamDataChart control with a title set on the y-axis.

Properties

The Title property sets the value of the information areas of the axis.

Property Name	Property Type	* Description*
Title	`String`	Defines the title of the axis.

The following table summarizes the properties of the TitleSettings object available to the axis’s TitleSettings property .

Property Name	Property Type	* Description*
TitleSettings	`TitleSettings`	Defines a set of visual settings such foreground, font, alignment, margins, angle and many more for the axis title.
TitleSettings.Position	`AxisTitlePosition`	Defines the position of the title according to the position of the labels. By default this property is set to Auto, meaning that the axis title will always be on opposite sides of the axis stroke and the axis labels. In other words, axis labels will be always between axis title and axis stroke even if you change the location of axis labels. For example, changing location of an axis label to OutsideRight automatically position the axis title to the right side of the axis labels.
TitleSettings.Angle	`double`	Defines the rotation of the title around the center of axis title in degrees. For example, value of -90 rotates the title vertically and value of zero will render the title horizontally.
TitleSettings.Effect	`Effect`	Defines the effect applied to the axis title.
TitleSettings.Foreground	`Brush`	Defines the color applied to the foreground of the axis title.
TitleSettings.FontFamily	`FontFamily`	Defines the font applied to the text of the axis title.
TitleSettings.FontSize	`double`	Defines the font size used rendering text of the axis title.
TitleSettings.FontStretch	`FontStretch`	Defines the face of the font, for example normal, condensed or expanded.
TitleSettings.FontStyle	`FontStyle`	Defines the font attributes used rendering text of the axis title, for example Regular, Bold, Italic, etc.
TitleSettings.FontWeight	`FontWeight`	Defines the thickness of the characters used for the axis title text, for example bold, normal, etc.
TitleSettings.HorizontalAlignment	`HorizontalAlignment`	Defines the horizontal alignment of the axis title in the axis info panel. This property only applies to a title on x-axis.
TitleSettings.VerticalAlignment	`VerticalAlignment`	Defines the vertical alignment of the axis title in the axis info panel. This property only applies to a title on y-axis.
TitleSettings.Opacity	`double`	Defines the opacity of the axis title.
TitleSettings.OpacityMask	`Brush`	Defines the opacity mask of the axis title.
TitleSettings.Margin	`Thickness`	Defines the size of the margin set around the axis title.

Example

The screenshot, following the table, demonstrates how the XamDataChart control with axis Title and title settings looks as a result of the following settings:

Property	Value
Title	Terawatt Hours (TWh)
TitleSettings.Position	Bottom
TitleSettings.Angle	270
TitleSettings.FontSize	15

Following is the code that implements this example:

In XAML:

<ig:NumericYAxis x:Name="yAxis" Title="Terawatt Hours (TWh)">
      <ig:NumericYAxis.TitleSettings >
         <ig:TitleSettings  FontSize="15" Angle="270" Position="Bottom" />
      </ig:NumericYAxis.TitleSettings>
</ig:NumericYAxis>

In C#:

var yAxis = new NumericYAxis();
yAxis.Title = "Terawatt Hours (TWh)";
yAxis.TitleSettings = new AxisTitleSettings();
yAxis.TitleSettings.Position = AxisTitlePosition.Bottom;
yAxis.TitleSettings.Angle = 270;
yAxis.TitleSettings.FontSize = 15;

In Visual Basic:

Dim yAxis As New NumericYAxis()
yAxis.Title = "Terawatt Hours (TWh)"
yAxis.TitleSettings = new AxisTitleSettings()
yAxis.TitleSettings.Position = AxisTitlePosition.Bottom
yAxis.TitleSettings.Angle = 270
yAxis.TitleSettings.FontSize = 15

WPF | Help Topics