How can you modify axis text elements without disturbing the axis labels?
Description:
When the font formatting properties of the axis is personalized all the text elements of the axis get personalized. So this article describes the way to personalize the axis labels alone.
Solution:
The font formatting properties of the axis affects all the text elements related to the axis. Hence to customize the axis labels or any other text element that you want, custom templates can be assigned to the text element’s template property. Thus the desired text element alone can be customized.
The LabelTemplate property of the axis is used to customize the axis labels.
Note: The font formatting properties of the LabelTemplate i.e., font formatting properties in the TextBlock of the DataTemplate, must be overridden. If not the formatting properties of the axis TextElement are assigned to the labels of the axis, that is, if the FontSize 23 is not assigned in the LabelTemplate, the axis labels take the FontSize 30 from the TextElement.FontSize property of the axis.
XAML
<!--Defining the resource for the LabelTemplate-->
<Window.Resources>
<local:converter x:Key="conver"/>
<DataTemplate x:Key="labelTemplate1">
<TextBlock Text="{Binding Converter= {StaticResource conver}}"
<!--Overriden properties in the DataTemplate-->
FontSize="23" Foreground="Blue" FontFamily="Calibri"
TextAlignment="Left" />
</DataTemplate>
</Window.Resources>
<syncfusion:SfChart.PrimaryAxis >
<syncfusion:CategoryAxis Header="Product"
<!--DataTemplate assigned for the axis labels-->
LabelTemplate="{StaticResource labelTemplate1}"
<!--TextElement properties are changed but it doesn’t affect the text size in LabelTemplate-->
TextElement.FontSize="30" TextElement.Foreground="Red" TextElement.FontFamily="Comic Sans MS"/>
</syncfusion:SfChart.PrimaryAxis>
C#
public class converter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return (value as ChartAxisLabel).LabelContent;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
C#
//DataTemplate Assigned for the axis labels
sampleChart.PrimaryAxis.LabelTemplate = Resources["labelTemplate1"] as DataTemplate;
//TextElement properties are changed but it doesn’t affect the text size in LabelTemplate
sampleChart.PrimaryAxis.FontSize = 30;
sampleChart.PrimaryAxis.Foreground = Brushes.Red;
sampleChart.PrimaryAxis.FontFamily = new FontFamily("Comic Sans MS");
Output:
The following screenshot illustrates the output for the axis labels whose font formatting remains undisturbed.
Figure 1: Chart with axis label style applied
