Axis Title in WinUI Chart (SfCartesianChart)

9 Jun 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);