How to customize the legend's position?

Description

Legends are not restricted to position on the top of the chart. It can be placed in or around the plot area based on the series or data. This article describes how the legends position can be customized.

Solution

The SfChart provides the following properties to align or position the legends anywhere in the chart.

DockPosition is used to position the legends either at the Bottom, Left, Right, or Top. Another option is Floating that is used to position the legends anywhere over the plot area.

The OffsetX and OffsetY properties are used to give horizontal and vertical offset for the legends. These properties work only with the DockPosition as Floating.

LegendPosition is used to place the legends Inside or Outside the plot area.

Example 1

XAML

<chart:ChartLegend x:Name="Legend1" 
                                       Header="MultipleSeries"   
                                       FontSize="20"                        
                                       DockPosition="Top"   
                                       LegendPosition="Outside" 
                                       >                        
</chart:ChartLegend>

Output

Figure 1: Legends positioned with DockPosition as Top and LegendPosition as Outside

Example 2

XAML

      <chart:ChartLegend x:Name="Legend1" 
                                       Header="MultipleSeries"  
                                       FontSize="16"                                    
                                       OffsetX="470"
                                       OffsetY="400"
                                       DockPosition="Floating"   
                                       LegendPosition="Inside" 
                                       >                        
                    </chart:ChartLegend>

Output

Figure 2: Legends positioned with DockPosition as Floating and LegendPosition as Inside