Title in WinUI Circular Chart

18 Nov 20185 minutes to read

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

<chart:SfCircularChart x:Name="chart" Header="Circular Chart Header">

    <!-- Configure additional chart elements -->
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
chart.Header = "Circular Chart Header";

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

Title support in WinUI chart

Customization

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

<chart:SfCircularChart>

    <!-- Configure additional chart elements -->
    <chart:SfCircularChart.Header>
        <Border 
            BorderThickness="0.5"
            BorderBrush="Black"
            Margin="10"
            CornerRadius="5">
            <TextBlock 
                Text="Circular Chart Header"
                Margin="5" 
                FontFamily="Verdana"
                FontSize="14" 
                Foreground="Blue">
            </TextBlock>
        </Border>
    </chart:SfCircularChart.Header>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

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

TextBlock textBlock = new TextBlock()
{
    Text = "Circular Chart Header",
    FontFamily = new FontFamily("Verdana"),
    Foreground = new SolidColorBrush(Colors.Blue),
    FontSize = 14,
    Margin = new Thickness(5),
};

border.Child = textBlock;

chart.Header = border;

Title customization support in WinUI 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 SfCircularChart.

<chart:SfCircularChart 
    x:Name="chart"
    HorizontalHeaderAlignment="Right">
    <chart:SfCircularChart.Header>
        <Border 
            BorderThickness="0.5"
            BorderBrush="Black"
            Margin="10"
            CornerRadius="5">
            <TextBlock 
               Text="Circular Chart Header"
               Margin="5"
               HorizontalTextAlignment="Center"
               FontFamily="Verdana"
               FontSize="14"
               Foreground="Blue"/>
        </Border>
    </chart:SfCircularChart.Header>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

chart.HorizontalHeaderAlignment = HorizontalAlignment.Right;

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

TextBlock textBlock = new TextBlock()
{
    Text = "Circular Chart Header",
    HorizontalTextAlignment = TextAlignment.Center,
    FontFamily = new FontFamily("Verdana"),
    Foreground = new SolidColorBrush(Colors.Blue),
    FontSize = 14,
    Margin = new Thickness(5),
};

border.Child = textBlock;

chart.Header = border;

Title alignment in WinUI Chart