Legend in UWP Sunburst Chart (SfSunburstChart)

14 Jul 20266 minutes to read

The Legend is used to represent the first level of categories in sunburst chart.

You can initialize the legend as in the below code snippet:

<sunburst:SfSunburstChart.Legend>
    <sunburst:SunburstLegend/>
</sunburst:SfSunburstChart.Legend>
SunburstLegend legend = new SunburstLegend();
chart.Legend = legend;

Legend_img1

Legend icon

You can specify different shapes of legend icon by using the LegendIcon property. By default, the legend icon is Circle. The Sunburst chart has some predefined shapes such as:

  • Circle
  • Cross
  • Diamond
  • Pentagon
  • Rectangle
  • Triangle
<sunburst:SfSunburstChart.Legend>
    <sunburst:SunburstLegend LegendIcon="Pentagon"/>
</sunburst:SfSunburstChart.Legend>
SunburstLegend legend = new SunburstLegend()
{
    LegendIcon = SunburstLegendIcon.Pentagon
};
chart.Legend = legend;

Legend_img2

The following properties are used to customize the legend icons size.

  • IconHeight – Gets or sets the double value that represents the icon(s) height.
  • IconWidth – Gets or sets the double value that represents the icon(s) width.

You can customize your own legend shape by applying custom template using LegendIconTemplate property as shown in the below code.

  • XAML
    • <sunburst:SfSunburstChart.Legend>

    <sunburst:SfSunburstChart.Legend  LegendIcon="Custom">

        <sunburst:SunburstLegend.LegendIconTemplate>

            <DataTemplate>
                <Path  Stroke="{Binding Stroke}" Stretch="Fill" Fill="{Binding Interior}"  
                StrokeThickness="{Binding StrokeThickness}"
                Data="F1 M 133.133,45.7109L 154.307,24.5363L 175.482,45.7109L 154.307,66.8856L 175.482,88.0603L 154.307,109.235L 133.133,88.0603L 111.958,109.235L 90.7835,88.0603L 111.958,66.8856L 90.7835,45.7109L 111.958,24.5363L 133.133,45.7109 Z " />
            </DataTemplate>

        </sunburst:SunburstLegend.LegendIconTemplate>

    </sunburst:SfSunburstChart.Legend>

</sunburst:SfSunburstChart.Legend>

    Legend_img3

    NOTE

    You need to set the LegendIcon value as Custom in order to apply the custom template.

    Positioning the legend

    You can customize the position to left, right, top, bottom for the legend using DockPosition property as shown in the below code snippet.

    <sunburst:SfSunburstChart.Legend>           
    <sunburst:SunburstLegend DockPosition="Top" />           
</sunburst:SfSunburstChart.Legend>
    SunburstLegend legend = new SunburstLegend()
{
    DockPosition = ChartDock.Top
};

chart.Legend = legend;

    Legend_img4

    Customize the legend

    You can arrange the legend items smartly by using ItemPanelTemplate and ItemTemplate property. The following code shows how to arrange the legend items smartly.

  • XAML
    • <sunburst:SfSunburstChart.Legend>
        
    <sunburst:SunburstLegend  DockPosition="Top" >
        
        <sunburst:SunburstLegend.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid  Height="80" />
            </ItemsPanelTemplate>
        </sunburst:SunburstLegend.ItemsPanel>

        <sunburst:SunburstLegend.LegendIconTemplate>

            <DataTemplate>
                <Grid>
                    <StackPanel>
                        <Ellipse Stroke="{Binding Interior}"
                        StrokeThickness="2" Fill="White"
                            Height="8" Width="8"/>
                        <TextBlock Text="{Binding Label}" FontSize="12"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>

        </sunburst:SunburstLegend.LegendIconTemplate>

    </sunburst:SunburstLegend>

</sunburst:SfSunburstChart.Legend>

    Legend_img5

    Legend interactivity

    You can select a specific category while clicking on corresponding legend item through ClickAction property. It has three types of action

    • ToggleSegmentSelection
    • ToggleSegmentVisibility
    • None

    ToggleSegmentSelection

    Used to highlight specific category while clicking on legend item.

    <sunburst:SfSunburstChart.Legend>         
    <sunburst:SunburstLegend ClickAction="ToggleSegmentSelection"/>
</sunburst:SfSunburstChart.Legend>
    SunburstLegend legend = new SunburstLegend()
{
    ClickAction =LegendClickAction.ToggleSegmentSelection
};

chart.Legend = legend;

    Legend_img6

    ToggleSegmentVisibility

    Used to disable the specific category while clicking on legend item.

    <sunburst:SfSunburstChart.Legend>         
    <sunburst:SunburstLegend ClickAction ="ToggleSegmentVisibility" />
</sunburst:SfSunburstChart.Legend>
    SunburstLegend legend = new SunburstLegend()
{
    ClickAction = LegendClickAction.ToggleSegmentVisibility
};
chart.Legend = legend;

    Legend_img7