Syncfusion AI Assistant

How can I help you?

Axis Title in WinUI Chart (SfCartesianChart)

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" });

Header support for ChartAxis in WinUI Chart

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

Axis header style in WinUI Chart

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

HeaderTemplate support for ChartAxis in WinUI Chart