Class ChartLegend

Represents the legend for the SfCartesianChart, SfCircularChart, SfPolarChart, SfFunnelChart, and SfPyramidChart classes.

Inheritance

System.Object

ChartLegend

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public class ChartLegend : DependencyObject, ILegend

Remarks

The items in the legend contain the key information about the ChartSeries. The legend has all abilities such as docking, enabling, or disabling the desired series.

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend CheckBoxVisibility="Visible"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     Label="PieSeries"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend();

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
   Label = "PieSeries",
};
chart.Series.Add(series);

Constructors

ChartLegend()

Initializes a new instance of the ChartLegend class.

Declaration

public ChartLegend()

Fields

BackgroundProperty

Identifies the Background dependency property. The DependencyProperty for Background property.

Declaration

public static readonly DependencyProperty BackgroundProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

BorderBrushProperty

Identifies the BorderBrush dependency property. The DependencyProperty for BorderBrush property.

Declaration

public static readonly DependencyProperty BorderBrushProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

BorderThicknessProperty

Identifies the BorderThickness dependency property. The DependencyProperty for BorderThickness property.

Declaration

public static readonly DependencyProperty BorderThicknessProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CheckBoxVisibilityProperty

Identifies the CheckBoxVisibility dependency property. The DependencyProperty for CheckBoxVisibility property.

Declaration

public static readonly DependencyProperty CheckBoxVisibilityProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CornerRadiusProperty

The DependencyProperty for CornerRadius property.

Declaration

public static readonly DependencyProperty CornerRadiusProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeaderProperty

The DependencyProperty for Header property.

Declaration

public static readonly DependencyProperty HeaderProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeaderTemplateProperty

The DependencyProperty for HeaderTemplate property.

Declaration

public static readonly DependencyProperty HeaderTemplateProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HorizontalHeaderAlignmentProperty

Identifies the HorizontalHeaderAlignment dependency property. The DependencyProperty for HorizontalHeaderAlignment property.

Declaration

public static readonly DependencyProperty HorizontalHeaderAlignmentProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IconHeightProperty

Identifies the IconHeight dependency property. The DependencyProperty for IconHeight property.

Declaration

public static readonly DependencyProperty IconHeightProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IconVisibilityProperty

Identifies the IconVisibility dependency property. The DependencyProperty for IconVisibility property.

Declaration

public static readonly DependencyProperty IconVisibilityProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IconWidthProperty

Identifies the IconWidth dependency property. The DependencyProperty for IconWidth property.

Declaration

public static readonly DependencyProperty IconWidthProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IsVisibleProperty

The DependencyProperty for IsVisible property.

Declaration

public static readonly DependencyProperty IsVisibleProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ItemMarginProperty

Identifies the ItemMargin dependency property. The DependencyProperty for ItemMargin property.

Declaration

public static readonly DependencyProperty ItemMarginProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ItemTemplateProperty

Identifies the ItemTemplate dependency property. The DependencyProperty for ItemTemplate property.

Declaration

public static readonly DependencyProperty ItemTemplateProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

PaddingProperty

Identifies the Padding dependency property. The DependencyProperty for Padding property.

Declaration

public static readonly DependencyProperty PaddingProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

PlacementProperty

The DependencyProperty for Placement property.

Declaration

public static readonly DependencyProperty PlacementProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ToggleSeriesVisibilityProperty

The DependencyProperty for ToggleSeriesVisibility property.

Declaration

public static readonly DependencyProperty ToggleSeriesVisibilityProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

Properties

Background

Gets or sets the brush value to customize the appearance of the legend background.

Declaration

public Brush Background { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Brush	It accepts Microsoft.UI.Xaml.Media.Brush value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Background = "Red"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    Background = new SolidColorBrush(Colors.Red),
};

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

BorderBrush

Gets or sets the brush value to customize the appearance of the legend outer border.

Declaration

public Brush BorderBrush { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Brush	It accepts Microsoft.UI.Xaml.Media.Brush value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend BorderBrush = "Red" BorderThickness = "2"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    BorderBrush = new SolidColorBrush(Colors.Red),
    BorderThickness = 2
};

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

BorderThickness

Gets or sets the thickness value for the border thickness of the legend.

Declaration

public Thickness BorderThickness { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Thickness	It accepts Microsoft.UI.Xaml.Thickness value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend BorderBrush = "Red" BorderThickness = "2"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    BorderBrush = new SolidColorBrush(Colors.Red),
    BorderThickness = 2
};

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

CheckBoxVisibility

Gets or sets the value indicating whether the legend checkbox is visible or not.

Declaration

public Visibility CheckBoxVisibility { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Visibility	It accepts Microsoft.UI.Xaml.Visibility value and the default value is Microsoft.UI.Xaml.Visibility.Collapsed.

Remarks

The chart legend enables the checkbox for each legend item to be visible or collapse the associated series.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend CheckBoxVisibility = "Visible"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ CheckBoxVisibility = Visibility.Visible };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

CornerRadius

Gets or sets the value for the corner radius of the legend's border.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.CornerRadius	It accepts Microsoft.UI.Xaml.CornerRadius value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend CornerRadius = "5"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ CornerRadius = new CornerRadius(5) };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

Header

Gets or sets a value for the header of the legend.

Declaration

public object Header { get; set; }

Property Value

Type
System.Object

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Header = "Data analysis"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ Header = "Data analysis" };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

HeaderTemplate

Gets or sets a template to customize the header appearance of the legend.

Declaration

public DataTemplate HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	It accepts Microsoft.UI.Xaml.DataTemplate value.

Examples

MainPage.xaml

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend Header="Data analysis">
           <chart:ChartLegend.HeaderTemplate>
               <DataTemplate>
                   <Border BorderBrush = "Red" BorderThickness="1">
                       <TextBlock Text = "{Binding}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                   </Border>
               </DataTemplate>
           </chart:ChartLegend.HeaderTemplate>
       </chart:ChartLegend>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

HorizontalHeaderAlignment

Gets or sets the HorizontalAlignment value for the legend's header.

Declaration

public HorizontalAlignment HorizontalHeaderAlignment { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.HorizontalAlignment	It accepts Microsoft.UI.Xaml.HorizontalAlignment value.

IconHeight

Gets or sets the value for the height of the legend icon.

Declaration

public double IconHeight { get; set; }

Property Value

Type	Description
System.Double	It accepts double value and the default value is 12.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend IconHeight = "15"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ IconHeight = 15 };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

IconVisibility

Gets or sets the value indicating whether the legend icon is visible or not.

Declaration

public Visibility IconVisibility { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Visibility	It accepts Microsoft.UI.Xaml.Visibility value and the default value is Microsoft.UI.Xaml.Visibility.Visible.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend IconVisibility = "Visible"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ IconVisibility = Visibility.Visible };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

IconWidth

Gets or sets the value for the width of the legend icon.

Declaration

public double IconWidth { get; set; }

Property Value

Type	Description
System.Double	It accepts double values and the default value is 12.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend IconWidth = "15"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ IconWidth = 15 };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

IsVisible

Gets or sets a value that indicates whether the legend is visible or not.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `True`

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend IsVisible = "True"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ IsVisible = true };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ItemMargin

Gets or sets the margin value for the legend item.

Declaration

public Thickness ItemMargin { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Thickness	It accepts Microsoft.UI.Xaml.Thickness value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend ItemMargin = "5"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ ItemMargin = new Thickness(5), };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ItemTemplate

Gets or sets a template to customize the appearance of the legend's item.

Declaration

public DataTemplate ItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	It accepts Microsoft.UI.Xaml.DataTemplate value.

Examples

MainPage.xaml

<Grid>
<Grid.Resources>
     <Style TargetType="chart:ChartLegend" >
           <Setter Property="ItemTemplate">
               <Setter.Value>
                   <DataTemplate>
                       <CheckBox IsChecked="{Binding IsSeriesVisible,Mode=TwoWay}"
                                 Content="{Binding Label}"
                                 Margin="5" />
                   </DataTemplate>
               </Setter.Value>
           </Setter>
       </Style>
   </Grid.Resources>
<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Padding = "5"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>
</Grid>

Padding

Gets or sets the thickness value for the legend's padding.

Declaration

public Thickness Padding { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Thickness	It accepts Microsoft.UI.Xaml.Thickness value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Padding = "5"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    Padding = new Thickness(5),
};

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

Placement

Gets or sets the placement for the legend in a chart.

Declaration

public LegendPlacement Placement { get; set; }

Property Value

Type	Description
LegendPlacement	It accepts LegendPlacement values and the default value is Top.

Remarks

Legends can be placed left, right, top, or bottom around the chart area.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Placement = "Right"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ Placement = LegendPlacement.Right };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ToggleSeriesVisibility

Gets or sets a value indicating whether the chart series visibility by tapping the legend item.

Declaration

public bool ToggleSeriesVisibility { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `True`

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend ToggleSeriesVisibility = "True"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ ToggleSeriesVisibility = true };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);