Chart Title in WinUI Chart (SfPolarChart)

18 Nov 20184 minutes to read

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

XAML

<chart:SfPolarChart x:Name="chart" Header="Polar Chart">

<!-- Configure additional chart elements -->
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
chart.Header = "Polar Chart";

// Configure additional chart elements
this.Content = chart;

Customization

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

XAML

<chart:SfPolarChart>
    <chart:SfPolarChart.Header>
        <Border BorderThickness="2" BorderBrush="Black" Margin="10" CornerRadius="5">
            <TextBlock FontSize="14" Text="Polar Chart" Margin="5"/>
        </Border>
    </chart:SfPolarChart.Header>

    <!-- Configure additional chart elements -->
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();

// Configure additional chart elements
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 = "Polar Chart",
    Margin = new Thickness(5),
    FontSize = 14
};

border.Child = textBlock;

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 SfPolarChart.

XAML

<chart:SfPolarChart HorizontalHeaderAlignment="Left">
    <chart:SfPolarChart.Header>
        <Border 
            BorderThickness="2"
            BorderBrush="Black"
            Background="LightBlue"
            Margin="10"
            CornerRadius="5">
            <TextBlock 
                Text="Polar Chart"
                Margin="5" 
                HorizontalTextAlignment="Center"
                FontSize="14" 
                Foreground="Blue">
            </TextBlock>
        </Border>
    </chart:SfPolarChart.Header>

    <!-- Configure additional chart elements -->
 </chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
chart.HorizontalHeaderAlignment = HorizontalAlignment.Left;

// Configure additional chart elements
Border border = new Border()
{
    BorderThickness = new Thickness(2),
    BorderBrush = new SolidColorBrush(Colors.Black),
    Background = new SolidColorBrush(Colors.LightBlue),
    Margin = new Thickness(10),
    CornerRadius = new CornerRadius(5)
};

TextBlock textBlock = new TextBlock()
{
    Text = "Polar Chart",
    HorizontalTextAlignment = TextAlignment.Center,
    Foreground = new SolidColorBrush(Colors.Blue),
    FontSize = 14,
};

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

// Configure additional chart elements