The XamCategoryChart control allows you full control over configuring, formatting and styling the labels displayed on your chart. By default, you do not need to explicitly set the labels. The Category Chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels.
In the XamCategoryChart 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 category 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 XamCategoryChart control, axis labels always display simple text without any formatting applied to them. However, you can change the format of axis labels by handling the XAxisFormatLabel and YAxisFormatLabel events. For example, if you are plotting monetary data along y-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 handle the YAxisFormatLabel event and provide a currency formatted string for the label to use.
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:XamCategoryChart x:Name="chart1"
Title="Weather Data"
Subtitle="(High, Average, Low)"
XAxisLabelFontSize="16"
XAxisLabelTextColor="Red"
XAxisLabelFontAttributes="Bold"
XAxisFormatLabel="chart1_XAxisFormatLabel">
</ig:XamCategoryChart>In C#:
chart1.XAxisLabelFontSize = 16;
chart1.XAxisLabelTextColor = new SolidColorBrush(Colors.Red);
chart1.XAxisLabelFontAttributes = FontAttributes.Bold;
chart1.XAxisFormatLabel += chart1_XAxisFormatLabel;
public void chart1_XAxisFormatLabel(object sender, AxisFormatLabelEventArgs e)
{
var item = e.Item as WeatherData;
e.Label = item.Date.ToString("MM/dd");
}You can also set the XAxisLabel property using format strings to achieve the same result, as shown by the code snippet below:
In XAML
<ig:XamCategoryChart x:Name="chart1"
Title="Weather Data"
Subtitle="(High, Average, Low)"
XAxisLabel="{}{Date:MM/dd}"
XAxisLabelFontSize="16"
XAxisLabelTextColor="Red"
XAxisLabelFontAttributes="Bold">
</ig:XamCategoryChart>The following screenshot demonstrates the XamCategoryChart control with the x-axis label formatted and styled.
