Legend and Titles | ComponentOne FlexChart for UWP

Legend and Titles

In This Topic

Legend
Header and Footer

Legend

The legend displays entries for series with their names and predefined symbols. In Sunburst, you can perform various customizations with the legend of Sunburst, as follows:

Orientation: Set the orientation of the legend as horizontal, vertical, or automatic by using the LegendOrientation property provided by the FlexChartBase class. The property can be set to any of the values from the Orientation enumeration.
Position: Set the legend on top, bottom, left, right, or let it be positioned automatically by using the LegendPosition property that accepts values from the Position enumeration. Setting the LegendPosition property to None hides the legend.
Styling: Customize the overall appearance of the legend, such as setting stroke color or changing font by using styling properties accessible through the LegendStyle property. The styling properties Stroke, FontSize, and FontStyle are provided by the ChartStyle class.
Title and title styling: Specify the legend title using the LegendTitle property that accepts a string. Once you have set the title, you can style it using the LegendTitleStyle property that provides access to the customization properties of the ChartStyle class.

Header and Footer

Header and Footer are descriptive texts at the top and bottom of the chart that provide information about the overall chart data. You can access Header and Footer of Sunburst chart by using the Header and the Footer property respectively, of the FlexChartBase class. Possible customizations with Header and Footer are as follows:

Font: Change the font family, font size, and font style of Header and Footer using the various font properties of the ChartStyle class accessible through the HeaderStyle or FooterStyle property of the FlexChartBase class.
Stroke: Set stroke of the titles for enhanced appeal by using the Stroke property.

The following image displays Sunburst chart with the legend and titles set and customized.

The following code snippet illustrates how to set respective properties for the legend and titles customization. This code uses the sample created in Quick Start.

XAML
Code

Tab Caption

<Chart:C1Sunburst x:Name="sunburst" 
                  SelectionMode="Point" 
                  SelectedItemOffset="0.1" 
                  SelectedItemPosition="Top" 
                  LegendPosition="None"
                  Header="Quartely Sales" 
                  Footer="Company XYZ" 
                  InnerRadius="0.1" 
                  Reversed="True" 
                  Palette="Dark" 
                  Offset="0.1" 
                  ItemsSource="{Binding HierarchicalData}" 
                  Binding="Value" 
                  BindingName="Year,Quarter,Month" 
                  ChildItemsPath="Items" 
                  ToolTipContent="{}{name}&#x000A;{y}" 
                  Margin="-376,0,0,0" 
                  LegendTitle="Year"  >
    <Chart:C1Sunburst.LegendTitleStyle>
        <Chart:ChartStyle FontFamily="Arial" 
                          FontSize="10" 
                          FontStretch="Normal" 
                          FontWeight="Bold"/>
    </Chart:C1Sunburst.LegendTitleStyle>
    <Chart:C1Sunburst.HeaderStyle>
        <Chart:ChartStyle FontFamily="Arial" 
                          FontSize="12" 
                          FontStretch="Normal" 
                          FontWeight="Bold"/>
    </Chart:C1Sunburst.HeaderStyle>
    <Chart:C1Sunburst.FooterStyle>
        <Chart:ChartStyle FontFamily="Arial" 
                          FontSize="10" 
                          FontStretch="Normal" 
                          FontWeight="Bold"/>
    </Chart:C1Sunburst.FooterStyle>
    <Chart:C1Sunburst.DataLabel>
        <Chart:PieDataLabel Position="Inside" 
                            Content="{}{name}" 
                            ConnectingLine="True" 
                            Border="True">
        </Chart:PieDataLabel>
    </Chart:C1Sunburst.DataLabel>
</Chart:C1Sunburst>