Axis Header in WinUI Chart
18 Nov 20184 minutes to read
The Header property is used to set the title for the chart axis. It accepts any UIElement as the content of the axis title.
<chart:SfCartesianChart>
<!-- Configure additional chart elements -->
<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();
// Configure additional chart elements
chart.XAxes.Add(new CategoryAxis() { Header = "Category" });
chart.YAxes.Add(new NumericalAxis() { Header = "Values" });
Style
The HeaderStyle property is used to style the axis header.
<chart:SfCartesianChart>
<!-- Configure additional chart elements -->
<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();
// Configure additional chart elements
CategoryAxis primaryAxis = new CategoryAxis()
{
Header = "Category"
};
primaryAxis.HeaderStyle = new LabelStyle()
{
FontFamily = new FontFamily("Algerian"),
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>
<!-- Configure additional chart elements -->
<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:SfCartesianChart.XAxes>
</chart:SfCartesianChart>SfCartesianChart chart = new SfCartesianChart();
// The 'headerTemplate' resource is defined in XAML Resources and referenced here.
CategoryAxis primaryAxis = new CategoryAxis()
{
HeaderTemplate = chart.Resources["headerTemplate"] as DataTemplate
};
chart.XAxes.Add(primaryAxis);