The XamShapeChart control allows you full control over configuring, formatting and styling the labels displayed along the x-axis and y-axis on your chart. By default, you do not need to explicitly set the labels. The Shape Chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels.
This topic contains the following sections:
In the XamShapeChart control, you can change the rotation angle, margin, horizontal/vertical alignment, opacity, padding and visibility, of the x-axis and y-axis labels using the following properties:
The look and feel of the shape chart’s x-axis and y-axis labels can be styled in many aspects, the main of which are applying different font styles such as font type, font size and font weight to the labels. This can be achieved through the following properties:
In the XamShapeChart control, axis labels always display simple text without any formatting applied to them. However, you can change the format of axis labels by setting the formatting string for the XAxisLabel property. For example, if you are plotting monetary data along x-axis, the default labels will simply display a decimal representation of your monetary values. If you want to display these values with currency symbols, you need to set the XAxisLabel property such that it uses C format specifier followed by a number specifying decimal precision.
For detailed information on .NET Framework composite format strings please refer to the following online resources:
The following code example shows how to format and style labels on the x-axis using date formatting and other style properties:
In XAML:
<ig:XamShapeChart x:Name="chart1"
Title="Financial Data"
Subtitle="(High, Average, Low)"
XAxisLabelFontSize="16"
XAxisLabelMargin="14,0,0,0"
XAxisLabel="{}{0:$#.00}"
XAxisLabelForeground="Red"
XAxisLabelFontWeight="Bold">
</ig:XamShapeChart>In C#:
chart1.XAxisLabel = "{}{0:$#.00}";
chart1.XAxisLabelFontSize = 16;
chart1.XAxisLabelLeftMargin = new Thickness(14);
chart1.XAxisLabelForeground = new SolidColorBrush(Color.Red);
chart1.XAxisLabelFontWeight = FontWeights.Bold;In Visual Basic:
chart1.XAxisLabel = "{0:$#.00}"
chart1.XAxisLabelFontSize = 16
chart1.XAxisLabelLeftMargin = 14
chart1.XAxisLabelForeground = New SolidColorBrush(Color.Red)
chart1.XAxisLabelFontWeight = FontStyle.BoldYou can also set the XAxisLabel property using format strings to achieve the same result, as shown by the code snippet below:
In XAML:
<ig:XamShapeChart x:Name="chart1"
Title="Financial Data"
Subtitle="(High, Average, Low)"
XAxisLabel="{}{0:$#.00}"
XAxisLabelFontSize="16"
XAxisLabelForeground="Red"
XAxisLabelFontWeight="Bold">
</ig:XamShapeChart>The following screenshot demonstrates the XamShapeChart control with the x-axis label formatted and styled.
