Axis Title in WinUI Chart (SfCartesianChart)

21 Nov 20222 minutes to read

The Header property is used to set the title for the chart axis. It accepts any UIElement as content of axis title.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
    <chart:CategoryAxis Header="Category"/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis Header="Values"/>
</chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
chart.XAxes.Add(new CategoryAxis() { Header = "Category" });
chart.YAxes.Add(new NumericalAxis() { Header = "Values" });

Style

The HeaderStyle property is used to provide style for the axis header.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
    <chart:CategoryAxis Header="Category">
        <chart:CategoryAxis.HeaderStyle>
            <chart:LabelStyle FontFamily="Algerian"
							  FontSize="13"
							  Foreground="Blue"/>
        </chart:CategoryAxis.HeaderStyle>
    </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
CategoryAxis primaryAxis = new CategoryAxis() { Header = "Category" };
primaryAxis.HeaderStyle = new LabelStyle()
{
    FontFamily = new FontFamily("Calibri"),
    FontSize = 13,
    Foreground = new SolidColorBrush(Colors.Blue),
};
chart.XAxes.Add(primaryAxis);

Template

The appearance of the header can be customized using the HeaderTemplate property.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.Resources>
    <DataTemplate x:Key="headerTemplate">
        <Border BorderBrush="Blue"
				CornerRadius="5"
				BorderThickness="1">
            <TextBlock Text="Category"
					   FontSize="12"
					   FontStyle="Italic" 
					   FontWeight="Bold"
					   Margin="3"/>
        </Border>
    </DataTemplate>
</chart:SfCartesianChart.Resources>
. . .
<chart:SfCartesianChart.XAxes>
    <chart:CategoryAxis HeaderTemplate="{StaticResource headerTemplate}">
    </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
CategoryAxis primaryAxis = new CategoryAxis()
{
    HeaderTemplate = chart.Resources["headerTemplate"] as DataTemplate
};
chart.XAxes.Add(primaryAxis);