Legend in UWP Sunburst Chart (SfSunburstChart)

10 May 20217 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, legend icon is Circle. The Sunburst chart have 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 to represents icon(s) height.
  • IconWidth – Gets or sets the double value to represents 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 LegendIcon value as Custom in order to apply custom template.

    Positioning the Legend

    You can customize the position to left, right, top, bottom for the legend using DockPosition property as like in 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
    • ToggleSegmentVisiblity
    • 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