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.
<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis Header="Category"/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis Header="Values"/>
</chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
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.
<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>
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.
<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>
SfCartesianChart chart = new SfCartesianChart();
. . .
CategoryAxis primaryAxis = new CategoryAxis()
{
HeaderTemplate = chart.Resources["headerTemplate"] as DataTemplate
};
chart.XAxes.Add(primaryAxis);