Chart Title in WinUI Chart (SfPyramidChart)

21 Nov 20224 minutes to read

Header property is used to define the title for the chart.

XAML

<chart:SfPyramidChart x:Name="chart" Header="The Food Comparison Pyramid">
 . . .           
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.Header = "The Food Comparison Pyramid";
. . . 
this.Content = chart;

Customization

The pyramid chart provides support to add any UIElement as a title. The following code example defines TextBlock as chart header.

XAML

<chart:SfPyramidChart>

    <chart:SfPyramidChart.Header>
        <Border BorderThickness="2"
				BorderBrush="Black"
				Margin="10"
				CornerRadius="5">
            <TextBlock FontSize="14"
					   Text="The Food Comparison Pyramid"
					   Margin="5"/>
        </Border>
    </chart:SfPyramidChart.Header>
            
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
    . . .
    Border border = new Border()
    {
        BorderThickness = new Thickness(2),
        BorderBrush = new SolidColorBrush(Colors.Black),
        Margin = new Thickness(10),
        CornerRadius = new CornerRadius(5)
    };

    TextBlock textBlock = new TextBlock()
    {
        Text = "The Food Comparison Pyramid",
        Margin = new Thickness(5),
        FontSize = 14
    };

    border.Child = textBlock;
    chart.Header = border;
    . . . 
    this.Content = chart;

Alignment

The title text content can be aligned horizontally to the left, center or right of the chart using the HorizontalHeaderAlignment property of the SfPyramidChart.

XAML

<chart:SfPyramidChart x:Name="chart" 
                      Header="The Food Comparison Pyramid"
                      HorizontalHeaderAlignment="Left"
                      ItemsSource="{Binding Data}" 
                      XBindingPath="FoodName"
                      YBindingPath="Calories">
            
</chart:SfPyramidChart>

C#

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        SfPyramidChart chart = new SfPyramidChart();
        chart.Header = "The Food Comparison Pyramid";
        chart.HorizontalHeaderAlignment = HorizontalAlignment.Left;
        chart.SetBinding(SfPyramidChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
        chart.XBindingPath = "FoodName";
        chart.YBindingPath = "Calories";
        . . . 
        this.Content = chart;
    }
}