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.
<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);